位置固定 #footer - 移动 Safari (iPad) 错误行为答案

【问题标题】：Position fixed #footer - mobile Safari (iPad) buggy behaviour位置固定 #footer - 移动 Safari (iPad) 错误行为
【发布时间】：2012-12-07 12:33:09
【问题描述】：

我正在为 iPad 应用程序开发 html+css。

为了说明问题，我做了一个简单的假人：

<head>

    <meta charset="UTF-8" />

    <style>
        body {
            height:100%;
            width:100%;
            padding:0px;
            margin:0px;
            background:#333;    
        }
        #container {
            width:90%;
            margin:0 auto;
            background:#ccc;
            padding:10px;   
        }
        #footer {
            position:fixed;
            bottom:0px;
            height:100px;
            width:100%;
            background:red;
            text-align:center;  
        }
    </style>

</head>

<body>

    <div id="container">Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>                                                        
</div>
    <div id="footer">

    </div>        
</body>

尝试使用 iPad / Safari 移动版，您会在第一次滚动页脚时注意到（红色块）。它会向上滚动，直到您停止滚动。在您第二次尝试时，一切正常。

当您重新加载页面时，一切都会再次发生。

我认为这是对固定位置的支持是错误的。

任何想法如何解决这个问题？也许用 jQuery。

【问题讨论】：

我在 ipad 1 IOS 5.1 上没有看到任何问题。（除了页面打开时，页面中间红条闪烁，然后显示在正确的位置）你的IOS版本是多少？
我们目前使用的是 iOS 6.0.1（我添加这个是因为我和 Johan 一起工作:-)）。这也发生在 iPhone 上，因此不是 iPad 特有的问题。

标签： jquery ipad position mobile-safari fixed

【解决方案1】：

这与jQuery Mobile Fixed Footer Scrolls with Text One Time Then Stops in iOS App 遇到的问题相同吗？如果是这样，那么这个小技巧似乎解决了这个问题。

【讨论】：

另外，将 height=device-height 添加到元视口是否有效？

【解决方案2】：

我正在从事的项目也有同样的问题。而不是使用：

#footer {
      position:fixed;
      bottom:0px;
      height:100px;
      width:100%;
      background:red;
      text-align:center;  
}

我使用了以下代码，它确实对我有用

#footer {
      position:absolute;
      bottom:0px;
      height:100px;
      width:100%;
      background:red;
      text-align:center;  
}

【讨论】：

【解决方案3】：

上面的 Jimbo 发现了问题并引导我找到答案。

它有 100 毫秒的延迟。

这是对我有用的最终解决方案。

function fixJqmScrollBug() {
    window.scrollTo(0, 1);
    setTimeout(function() {
        window.scrollTo(0, 0);
    }, 100);
}
$(document).ready(function() {
    fixJqmScrollBug();
});

【讨论】：