滚动时iOS Safari上的怪异阻止

Question

在尝试解决浏览器上某些幻灯片的某些问题时，我达到了一个观点，即所有浏览器都可以正常运行，而Safari for iOS无法正常运行。

令人惊讶的是，它不会在响应模式下的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是这个 。 有谁知道这里发生了什么以及如何解决？

Answer 1

我遇到了同样的问题，显然是由于'100vh'和ios野生动物园的错误所致。 一旦我更改为“ 100％”，一切都会好起来，具体取决于您需要在何处使用视口高度，但这可能并不总是可行的。

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

尽管其他网站似乎暗示这可能不再是错误。