Question

在iOS 8上的移动版Safari中，当我按照链接打开一个新窗口（有一个<meta name="viewport" content="width=device-width, initial-scale=1.0">）时，页面间歇性地向上滚动（即顶部之间有一个很大的差距）视口和页面的第一个元素。）

在此之后滚动使行为恢复正常。这是非常令人沮丧的，最可靠的解决方法是什么？

Example page

<!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>

Screenshot

rdar：// 20598527

下的错误报告

Answer 1

看起来这个流氓滚动发生在页面首次绘制之后或之后。这可能是在DOM就绪之前或之后，窗口加载事件触发。

我的hacky解决方案（请参阅gist）是逐步运行window.scrollTo(0, 1);直到危险已经过去only on 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>

iOS中新窗口中的滚动偏移错误

1 个答案: