Вход iOS сфокусирован на фиксированных родительских остановках. Обновление фиксированных элементов

В Mobile Safari iOS 6.1.2

происходит следующее:

Шаги по воспроизведению

Создайте элемент position: fixed с элементом <input type="text"> внутри него.

Фактический результат

Ввод - не сфокусированный

Положение неподвижных элементов правильное, если вход не сфокусирован.
Фокусировка по вводу

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

Смотрите демо-версию: http://jsbin.com/oqamad/1/

Ожидаемый результат

Положение неподвижных элементов всегда соблюдается.

Исправление или обходное решение?

Любые подсказки, как заставить Safari правильно отображать фиксированные элементы, будут полезны.

Я бы предпочел обходное решение, которое не связано с использованием position: absolute и установки обработчика событий onscroll.

Ответы

Ответ 1

Это хорошо известная ошибка Safari, как на iPad, так и на iPhone.

Обходной путь, чтобы изменить положение на абсолютное для всех элементов, установленных с фиксированным положением.

Если вы используете Modernizr, вы также можете настроить таргетинг на мобильные устройства:

Код jQuery

$(document).ready(function() {

  if (Modernizr.touch) {

      $(document)

        .on('focus', 'input', function(e) {
            $('body').addClass('fixfixed');
        })

        .on('blur', 'input', function(e) {
            $('body').removeClass('fixfixed');
        });

      }

});

CSS

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

.fixfixed header, .fixfixed footer {
  position: absolute;
}

Ответ 2

Позиция. Исправлено множество известных ошибок, вы можете проверить их здесь: статья Remysharp. Вероятно, вы можете исправить некоторые из них, используя ответы на этот вопрос: позиция CSS: fixed;" в iPad/iPhone?

Удачи!

Ответ 3

Да, это особенно проблема сафари iOS с версии v5. Если вы используете Chrome на iOS, вы заметите, что он будет работать нормально. Bodge, который я использую, чтобы исправить это, состоит в том, чтобы создать и добавить элемент стиля в тело, а затем удалить его, а затем выполнить фокусировку на элементе.

Не спрашивайте меня, почему это работает, слишком много часов проб и ошибок!

Я также заметил, что после первого исправления вам не нужно выполнять трюк стиля для последующих фиксированных позиционированных элементов