Серая область видна при переключении с книжной на альбомную с использованием минимального пользовательского интерфейса iOS 7.1.

Мне помогла прокрутка вверх после отображения страницы. Это каким-то образом вызывает повторную визуализацию, и серое поле исчезает, однако я не могу объяснить, что именно Safari делает внутри:

window.scrollTo(0, 0);

Я пытался какое-то время исправить это, но безуспешно. Наконец-то я решил провести тест, в котором я:

1. Создан новый HTML-документ с метатегом minimal-ui.
2. Оставил тело документа пустым (без тегов HTML) и без стилей.

Протестировал это, и проблема все еще возникает.

Единственный вывод, к которому я пришел, заключается в том, что это ошибка в IOS 7.1, поэтому я отправил отчет об ошибке в Apple. Об этом сообщается как BUG #: 16335579.

Обратите внимание, что Mr. решение kraftwer1 сработало для меня (это хак, но его придется делать, пока Apple не исправит это). То есть добавление... window.scrollTo(0, 0); после orientationChange работает.

Наконец, я просто хотел также упомянуть, что отправка дополнительных отчетов об ошибках по этой проблеме в Apple повысит ее приоритет в их очереди.

На данный момент проблема действительно кажется ошибкой в ​​iOS 7.0 и 7.1. Я смог воспроизвести его только при использовании устройства в альбомной ориентации.

Это происходит в трех известных мне ситуациях, и во всех случаях хак window.scrollTo(0, 0) решает проблему.

1. При повороте устройства в ландшафт. Можно решить с помощью:

   $(window).on('orientationchange', function () {
     window.scrollTo(0, 0);
   });
   

2. При перетаскивании снизу документа. Решено путем обработки события scroll:

   $(window).on('scroll', function () {
     var focusedElement;
   
     if ($(document).scrollTop() !== 0) {
       focusedElement = $(':focus');
       if (!(focusedElement.is('input') || focusedElement.is('textarea'))) window.scrollTo(0, 0);
     }
   });
   

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

3. При закрытии клавиатуры все элементы теряют фокус:

   formLayer.on('blur', 'input, textarea', function () {
     if (!$(':focus').length) window.scrollTo(0, 0);
   });
   

Поскольку эта проблема актуальна только для версий iOS 7.0 и 7.1, лучше ограничить этот хак следующим выражением:

var buggyIOS = /\b(?:iPhone|iPod|iPad).*?\bOS 7_[01]/.test(window.navigator.userAgent);

Усовершенствуя решение window.scrollTo(0,0), я инкапсулирую в самоописывающее выражение немедленно вызванной функции и выполняю его при готовности документа и изменении размера окна:

(function minimalUiFix() {
  var fix = function () {
    window.scrollTo(0,0);
  };

  $(fix);
  $(window).on('resize.minimal-ui-fix', fix);
})();

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

Там много чего происходит, но я использую это в этом jsbin.

Этот трюк, кажется, не работает для меня. Посмотрите этот jsbin. То, что у меня здесь, довольно простое: контейнер с фиксированной позицией со скрытым переполнением, которое должно занимать весь экран. Прокрутка не должна быть возможной, однако я все еще получаю непреднамеренное прокручиваемое пространство. Все, что делает этот трюк, — это прокрутка вверх. Это не устраняет таинственное дополнительное пространство, которое вызывает реальную проблему.

Но применение исправления при прокрутке в дополнение к готовности и изменению размера кажется наиболее близким к приличной работе, которую я мог найти.

(function minimalUiFix() {

  var fix = function () { window.scrollTo(0,0); };
  $(fix);
  $(window).on('resize.minimal-ui-fix', fix);
  $(window).on('scroll.minimal-ui-fix', fix);

})();

Я думаю, что это лучшее, на что мы можем надеяться, пока Apple не исправит Mobile Safari или не будет обнаружен другой обходной путь.

Лучшее исправление, которое я нашел, находится здесь от Александра Коледы.

window.addEventListener('scroll', function () {
    if (document.activeElement === document.body && window.scrollY > 0) {
        document.body.scrollTop = 0;
    }
}, true);

Это также устраняет серую полосу при прокрутке вниз.

<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui=1, user-scalable=no">

Просто удалите Minimal-UI, который избавил меня от него.

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

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

Сначала давайте определим, повернулось ли устройство (также мы могли бы определить позже, является ли оно портретным или альбомным), для этого я собираюсь настроить var для проверки медиазапросов из JS:

var mql = window.matchMedia("(orientation: portrait)");

Затем мы можем прослушать, если есть какие-либо изменения, и переписать область просмотра:

    mql.addListener(function(m) {
        $('meta[name="viewport"]').attr("content","width=device-width, user-scalable=no, maximum-scale=1.2"); // No matter if is landscape or portrait
    });

Или мы могли бы быть более конкретными и активировать что-то другое для пейзажа/портрета.

    mql.addListener(function(m) {
        if(m.matches) {
            $('meta[name="viewport"]').attr("content","width=device-width, user-scalable=no, maximum-scale=1.2"); // Portrait
        }
        else {
            $('meta[name="viewport"]').attr("content","width=device-width, user-scalable=no, maximum-scale=1.0"); // Landscape
        }
    }); 

Я надеюсь, что это может помочь вам!