iOS上的奇怪阻止滚动上的Safari浏览器

在尝试修复浏览器上某些幻灯片的某些问题时，我达到了所有浏览器都能正常工作的程度，但Safari for iOS却没有。iOS上的奇怪阻止滚动上的Safari浏览器

令人惊讶的是，它没有发生在响应模式的Mac Safari上，它只发生在iOS上。

奇怪的行为是，一旦你到达页面的底部，部分内容被覆盖。如果您在到达底部时再次滚动，则可以立即滚动。如果你在这一点上滚动，它会发生相同的情况。

最小测试情况中，这是可重复的：

html, 
body, 
main { 
    width: 100vw; 
    height: 100vh; 
    overflow: hidden; 
} 


#test { 
    height: 100vh; 
    overflow-x: hidden; 
    overflow-y: scroll; 
    -webkit-overflow-scrolling: touch; 
} 

p { 
    padding: 20px 0; 
}

标记是这样的：

<body> 
    <div id="test"> 
    <p>Lots of p</p> 
    <p>Lots of p</p> 
    <p>Lots of p</p> 
    </div> 
</body>

JSBin具有可重复的情况下，this。有谁知道这里发生了什么，以及如何解决它？

来源

2017-02-27 Antonio Laguna

我有同样的问题！有没有解决方法？ –

我有同样的问题，显然这是由于'100vh'和ios safari的错误。一旦我改变为'100％'，一切都很好，这取决于你需要使用视口高度的位置，但这可能并不总是可能的。

裁判：http://webdesignerwall.com/tutorials/css-fix-for-ios-vh-unit-bug

虽然其他网站似乎在暗示这可能不再是一个错误。

来源

2018-01-10 23:37:22 Sam0

iOS上的奇怪阻止滚动上的Safari浏览器

回答

相关问题