Как исправить входной элемент iOS 11 в ошибке фиксированных модалов

Ошибка в вводе HTML в недавно выпущенном iOS 11 создает проблемы для веб-сайтов с элементами ввода в фиксированных контейнерах. Вот именно то, что происходит, и некоторые возможные обходные пути.

Если у вас есть фиксированный контейнер и он достаточно близко к нижней части экрана, заставляя браузер прокручиваться, чтобы освободить место для клавиатуры, курсор помещается вне ввода текста. Для нас это была серьезная проблема, поскольку одна из наших основных функций зависит от пользовательского ввода через фиксированный модальный диалог.

Для нас это была серьезная проблема, поскольку одна из наших основных функций зависит от пользовательского ввода через фиксированный модальный диалог.

Ответ 1

Пока нет идеального решения. Два временных варианта:

Изменить диалог/модальный на position: absolute (не рекомендуется)
Попробуйте удалить фоновые прокрутки при открытии модального/диалогового окна и восстановить его при закрытии диалогового окна.

Деталь для варианта 2: Например, вы можете установить свой корневой div (или любой другой, который имеет полосу прокрутки), как overflowY='hidden' когда откроется диалог, и измените его назад overflowY='' когда диалог закрывается. (Недостаток: браузер будет прокручиваться вверх, когда вы откроете диалог/модальный)

Замечания:

Не забывайте обнаруживать ОС/браузер при устранении триггера, иначе вы, вероятно, столкнетесь с проблемой в IE.
Следуйте этой теме, чтобы получить новейшее обновление об этой проблеме.

Ответ 2

Это решение помогло мне исправить любую модель IOS.

Первое, что касается только IOS-устройств с этим кодом.

//target ios
var isMobile = {
    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    }
}
if(isMobile.iOS()) { 
      jQuery('body').addClass('apple-ios');
}

затем поместите этот код в свой css:

body.apple-ios.modal-open {
  position: fixed;
  width:100%;
}

Если вы используете плагин wordpress и кеш, вам необходимо очистить весь кеш.

Надеюсь, это поможет вам.

Ответ 3

Я не уверен, что это точно такая же проблема, с которой вы столкнулись, но это решение сработало для меня:

.modal-open {position: fixed;}

iOS 11 Модифицированная текстовая область загрузки сафари за пределами курсора

Ответ 4

У меня была такая же проблема, взгляните на мой ответ, возможно, это вам поможет: fooobar.com/questions/97724/...

Ответ 5

Это решение помогло мне исправить проблему ввода IOS11: https://bitbucket.org/snippets/OlegChulakovStudio/RgBX8x

Он также исправляет раздражающую фоновая прокрутка, когда вы пытаетесь прокручивать внутри модальный:)

Резюме: Вы добавляете позицию: фиксированный для тела, cash window.pageYOffset и прокручиваете до позиции обналичения после всплывающего окна, чтобы предотвратить перемещение на верх страницы.

Ответ 6

У меня был этот iOS bugg с формой входа в элемент заголовка/баннера fixed. Внутри заголовка есть button, чтобы открыть модальное окно с формой входа. Фактическое модальное окно расположено absolute, но элемент заголовка/баннера fixed.

Я решил это довольно легко с помощью всего лишь нескольких строк кода. Так что я делаю то, что я меняю контейнер fixed на absolute, но только когда форма входа открыта, он делает магию с маркером ввода.

JQuery

$('.ios #mob-login').on('click', function(){
  $('body').toggleClass('login-open');
});

CSS

.ios body.login-open #banner-wrapper {
  position: absolute;
}

Итак, теперь фиксированный заголовок становится абсолютным. Если это iOS и только при открытии окна входа.

Это может решить вашу проблему, если у вас есть аналогичные проблемы.

Ps. Вам понадобится script для обнаружения и записи имени класса ios/ios11 до <html> или аналогичного, но я не буду входить в это сообщение. Вы можете найти множество решений для этого.

Ответ 7

Попробуйте это, это может помочь вам

//HTML
<head>
     <style>
          .ios-11-body-fixed {
             position: fixed;
             width: 100%;
          } 
     </style>
</head>

//jQuery
$("#leadgen-modal").on('show.bs.modal', function () {
    $('body').addClass('ios-11-body-fixed');
});
$('#leadgen-modal').on('hidden.bs.modal', function () {
           $('body').removeClass('ios-11-body-fixed');
});