固定位置#footer - 移动Safari（iPad）越野行为

我正在为iPad应用程序开发html + css。固定位置#footer - 移动Safari（iPad）越野行为

为了说明这个问题，我做了一个简单的哑：

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

来源

2012-12-07 Turbojohan

我在ipad 1 IOS 5.1上看不到任何问题。（除非页面中间打开红色条闪烁，然后显示在正确的位置）什么是您的IOS版本？ – trkaplan

我们目前正在使用iOS 6.0.1（自从我与Johan合作以来，我加了这个:-)）。这也发生在iPhone上，所以它不是iPad的特定问题。 –

神保上述确定的问题，使我的答案。

它延迟了100ms。

这是为我工作的最终溶剂。

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

来源

2013-01-21 08:24:08 Turbojohan

这是在这里遇到的相同问题jQuery Mobile Fixed Footer Scrolls with Text One Time Then Stops in iOS App？如果是这样，似乎小黑客修复了这个问题。

来源

2012-12-10 22:36:31

或者，您是否在元视口工作中添加了height = device-height？ –

与我正在进行的项目有同样的问题。而不是使用：

#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; 
}

来源

2013-01-07 10:13:07

固定位置#footer - 移动Safari（iPad）越野行为

回答

相关问题