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

【问题标题】：Scroll offset bug in new window in iOSiOS新窗口中的滚动偏移错误
【发布时间】：2015-06-25 02:59:57
【问题描述】：

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

rdar://20598527下的Bug报告

【问题讨论】：

Apple 在 iOS 8.3 中修复了这个问题

标签： html ios css responsive-design mobile-safari

【解决方案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>

【讨论】：