Question

在尝试修复浏览器上的一些幻灯片的某些问题时，我达到了一个所有浏览器都能很好地运行的点，但是适用于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。有谁知道这里发生了什么以及如何解决它？

Answer 1

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

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

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

滚动时iOS Safari上的奇怪阻塞

1 个答案: