html - 在 safari ios 上向上滑动时页面底部的空白区域

Question

我有一个占据浏览器所有视口的网页。当我专注于输入时，键盘会打开，如果我向上滑动网页，即使在 bouce 效果之后，底部也会有一个额外的空白区域。这只发生在 safari ios 上。Android 浏览器设备看起来不错。

我试图添加

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

但没有成功。似乎在全局页面上附加了一个额外的滚动条。

我们可以在 wikipedia.org 主页中看到类似的“问题”。如果您关注搜索输入并滚动到底部（仍然关注搜索输入）然后向上滑动，您可以看到在最后一个链接下创建了一个额外的空白区域 - “隐私政策”

关闭键盘后，空白空间就会消失。

有谁知道如何解决这个小（但烦人）的错误？

谢谢

PS：我在windows上，所以调试不是那么容易

标签： htmlcssiosmobile-safari

Answer 1

这在 safari 浏览器中是正常的。尝试打开任何网页并向上滚动，您将在页面底部看到额外的空白区域。一旦你从屏幕上举起手，一切都会恢复为默认值。