Html 在iOS的新窗口中滚动偏移错误_Html_Ios_Css_Responsive Design_Mobile Safari

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

html ios css responsive-design

Html 在iOS的新窗口中滚动偏移错误,html,ios,css,responsive-design,mobile-safari,Html,Ios,Css,Responsive Design,Mobile Safari,在iOS 8上的mobile safari中，当我按照一个链接打开一个新窗口（其中有一个）时，页面会间歇性地向上滚动（即，视口顶部和页面的第一个元素之间有一个很大的间隙）在这之后滚动会使行为恢复正常。这非常令人沮丧，最可靠的解决方法是什么身体{ 保证金：0； } h1{ 背景色：红色；保证金：0； } 页首下的错误报告rdar://20598527这看起来像是在页面第一次绘制时或刚绘制完之后发生的恶意滚动。这可能是在DOM就绪之前或之后，启动窗口加载事件我的黑客解决方案（请参阅

在iOS 8上的mobile safari中，当我按照一个链接打开一个新窗口（其中有一个

）时，页面会间歇性地向上滚动（即，视口顶部和页面的第一个元素之间有一个很大的间隙）

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


身体{
保证金：0；
}
h1{
背景色：红色；
保证金：0；
}
页首

下的错误报告rdar://20598527

这看起来像是在页面第一次绘制时或刚绘制完之后发生的恶意滚动。这可能是在DOM就绪之前或之后，启动窗口加载事件

我的黑客解决方案（请参阅）是以增量方式运行

window.scrollTo（0，1）直到危险过去
固定来源：
<!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>


身体{
保证金：0；
}
h1{
背景色：红色；
保证金：0；
}
页首
//修复rdar://20598527 (http://openradar.appspot.com/radar?id=6113789778853888)
//使用和修改此代码不受任何限制。
//在关闭主体标记之前放置
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&！铬；
国际单项体育联合会（mobileSafari）{
变量持续时间=500；//毫秒
var start=Date.now（）；
var id=setInterval（函数（）{
滚动到（0，1）；
如果（Date.now（）-duration>start）{
清除间隔（id）；
}
}, 10);
}
Apple在iOS 8.3中修复了这一问题
<!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>