滚动时 iOS Safari 上的奇怪阻止
Ant*_*una 5 html css safari mobile-safari 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 是这样的。有谁知道这里发生了什么以及如何解决它？
小智 1
我遇到了同样的问题，显然这是由于“100vh”和 ios safari 的错误造成的。一旦我更改为“100%”，一切都很好，具体取决于您需要使用视口高度的位置，但这可能并不总是可行。
参考：http ://webdesignerwall.com/tutorials/css-fix-for-ios-vh-unit-bug
尽管其他网站似乎暗示这可能不再是一个错误。
| 归档时间： |
|
| 查看次数： |
797 次 |
| 最近记录： |