在iOS上使用Safari导航栏进行拼接时保持元素固定

Question

我正在为Jekyll开发基于Hyde theme的网站。

此布局使用左侧固定的导航栏，宽度为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您找到了参考