После того как мы обновили свой iPhone до IOS11, я начал видеть курсор в случайной позиции в моем окне входа в систему. Это также происходит в Chrome/IOS11. Позиция курсора отмечена красным цветом на скриншотах ниже.
Как правильно позиционировать курсор на IOS11 Safari во всплывающих формах?
Ответ 1
Попробуйте добавить position: fixed
к телу страницы.
Ответ 2
Вывод из ответа ybentz. Если вы используете bootstrap modal, вы можете добавить это в свой файл main.js:
var savedScrollPosition;
$(document).on('show.bs.modal', '.modal', function() {
savedScrollPosition = $(window).scrollTop();
});
$(document).on('hidden.bs.modal', '.modal', function() {
window.scrollTo(0, savedScrollPosition);
});
И затем это к вашему css, потому что вы уже добавите модально-открытый класс в любое время в модальных попках:
body.modal-open {
position: fixed;
width: 100%;
}
Спасибо за помощь ybentz!! Я бы ответил на ваш комментарий, но у меня пока нет репутации.
Ответ 3
Игнасиос ответ решил проблему для меня. Если я покажу наложение/модальный, добавьте класс, закрепленный в теле. Также добавьте в css это правило:
body.fixed{
position: fixed;
}
Ответ 4
У меня была та же проблема, и решение position: fixed
на body
действительно решило его так, чтобы это было здорово. Следует отметить, однако, что добавление класса к body
заставляет браузер "прыгать" вверху страницы, поэтому, когда вы удаляете его, когда всплывающее/модальное закрытие, это может смутить пользователя.
Если ваш всплывающий/модальный полный экран в iOS, что вы можете сделать, чтобы исправить это, сохраните позицию прокрутки перед добавлением класса position: fixed
с чем-то вроде этого (используя jQuery, но с легкостью можно сделать с vanilla js):
var savedScrollPosition = $(window).scrollTop()
$('body').addClass('has-fullscreen-modal')
а затем восстановить его при всплывании, как показано ниже:
$('body').removeClass('has-fullscreen-modal')
window.scrollTo(0, savedScrollPosition)
и ваш css будет
body.has-fullscreen-modal {
position: fixed;
}
Надеюсь, что это поможет!
Ответ 5
Я исправил эту проблему с помощью этого CSS
@media(max-width:767px) {
body {
position:fixed !important;
overflow:auto !important;
height:100% !important;
}
}
Ответ 6
Лично position: fixed
прокрутите вверх автоматически. Довольно раздражает!
Чтобы избежать штрафа за другие устройства и версии, я применяю это исправление только к соответствующим версиям iOS.
** ВЕРСИЯ 1 - Исправление всех модалов **
Для javascript/jQuery
$(document).ready(function() {
// Detect ios 11_x_x affected
// NEED TO BE UPDATED if new versions are affected
var ua = navigator.userAgent,
iOS = /iPad|iPhone|iPod/.test(ua),
iOS11 = /OS 11_0|OS 11_1|OS 11_2/.test(ua);
// ios 11 bug caret position
if ( iOS && iOS11 ) {
// Add CSS class to body
$("body").addClass("iosBugFixCaret");
}
});
Для CSS
/* Apply CSS to iOS affected versions only */
body.iosBugFixCaret.modal-open { position: fixed; width: 100%; }
** ВЕРСИЯ 2 - Только выбранные модальности **
Я модифицировал функцию для запуска только для выбранных модалов с классом .inputModal
Чтобы избежать прокрутки вверх, нужно влиять только на модалы с входами.
Для javascript/jQuery
$(document).ready(function() {
// Detect ios 11_x_x affected
// NEED TO BE UPDATED if new versions are affected
(function iOS_CaretBug() {
var ua = navigator.userAgent,
scrollTopPosition,
iOS = /iPad|iPhone|iPod/.test(ua),
iOS11 = /OS 11_0|OS 11_1|OS 11_2/.test(ua);
// ios 11 bug caret position
if ( iOS && iOS11 ) {
$(document.body).on('show.bs.modal', function(e) {
if ( $(e.target).hasClass('inputModal') ) {
// Get scroll position before moving top
scrollTopPosition = $(document).scrollTop();
// Add CSS to body "position: fixed"
$("body").addClass("iosBugFixCaret");
}
});
$(document.body).on('hide.bs.modal', function(e) {
if ( $(e.target).hasClass('inputModal') ) {
// Remove CSS to body "position: fixed"
$("body").removeClass("iosBugFixCaret");
//Go back to initial position in document
$(document).scrollTop(scrollTopPosition);
}
});
}
})();
});
Для CSS
/* Apply CSS to iOS affected versions only */
body.iosBugFixCaret.modal-open { position: fixed; width: 100%; }
Для HTML Добавьте класс inputModal в модальный
<div class="modal fade inputModal" tabindex="-1" role="dialog">
...
</div>
Nota bene Функция javascript теперь самозапускается
REF: iOS 11 Модальная текстовая область загрузки Safari вне курсора