在 iOS 上折叠 Safari 导航栏时保持元素固定

Question

我正在基于 Hyde theme for Jekyll 开发一个网站。

此布局在左侧使用宽度为 100% 的固定导航栏。这在大多数情况下工作正常。

但是，在 iOS 上的 Safari 中，随着浏览器顶部导航栏的折叠，用户滚动时视口的高度会发生变化。如果发生这种情况，导航栏的大小直到滚动停止才会更新，在左下角留下一个区域没有被导航栏覆盖：

（注意文本延伸到导航栏下方。此屏幕截图是在页面运行时截取的。）

This video 显示实际问题。

有什么方法可以强制 Safari 在滚动过程中更新导航栏的高度？

Answer 1

这是一个持续的讨论。这个问题没有真正的解决方案。 https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers.html

您可以为您的网站尝试以下内容：

.sidebar {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 18rem;
    text-align: left;
    height: 100vh;
}

这将使侧边栏与底部对齐，文本不会被剪切。白色条将出现在顶部，但它不会因为底部被切掉而过于干扰。

Answer 2

添加以下样式来解决问题

html,body{
    -webkit-overflow-scrolling: touch;
}

Here你找到参考