Ошибка смещения прокрутки в новом окне в iOS

Question

Ошибка смещения прокрутки в новом окне в iOS

1

В мобильном сафари на iOS 8, когда я следую ссылке, чтобы открыть новое окно (которое имеет <meta name="viewport" content="width=device-width, initial-scale=1.0">), страница периодически появляется прокручивается вверх (т.е. существует большой разрыв между верхней частью окна просмотра и первым элементом страницы).

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

Пример страницы

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style type="text/css">
      body {
        margin:0;
      }
      h1 {
        background-color:red;
        margin:0;
      }
    </style>

  </head>
  <body>
    <h1>Top of page</h1>
  </body>

</html>

Сообщение об ошибке в rdar://20598527

diachedelic 18 апр. 2015, в 07:57

Источник

0

Apple исправила это в iOS 8.3
diachedelic 11 май 2015, в 03:40

Теги:

html

css

ios

responsive-design

mobile-safari

1 ответ

Ещё вопросы

diachedelic · Answer 1 · 2015-04-18T02-32-00.000Z

Похоже, эта прокрутка проклятия происходит так же, как и сразу после того, как страница сначала рисует. Вероятно, это возможно до или после готовности DOM, события загрузки окна.

Мое взломанное решение (см. Gist) заключается в том, чтобы запускать инкрементно window.scrollTo(0, 1); пока опасность не пройдет, только на Mobile Safari.

Исправленный источник:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style type="text/css">
      body {
        margin:0;
      }
      h1 {
        background-color:red;
        margin:0;
      }
    </style>
  </head>
  <body>
    <h1>Top of page</h1>

    <script>
      // Fixes rdar://20598527 (http://openradar.appspot.com/radar?id=6113789778853888)
      // Use and modify this code with no restriction whatsoever.
      // Place just before closing body tag

      var ua = window.navigator.userAgent;
      var iOS = ua.match(/iPad/i) || ua.match(/iPhone/i);
      var webkit = ua.match(/WebKit/i);
      var chrome = ua.match(/CriOS/i);
      var mobileSafari = iOS && webkit && !chrome;
      if (mobileSafari) {
        var duration = 500; // ms
        var start = Date.now();
        var id = setInterval(function() {
          window.scrollTo(0, 1);

          if (Date.now() - duration > start) {
            clearInterval(id);
          }
        }, 10);
      }
    </script>
  </body>

</html>