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

【问题标题】：Keep element fixed while Safari navigation bar collapes on iOSSafari 导航栏在 iOS 上折叠时保持元素固定
【发布时间】：2017-12-08 21:38:37
【问题描述】：

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

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

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

（请注意，文本延伸到导航栏下方。此屏幕截图是在页面移动时拍摄的。）

This video 显示正在发生的问题。

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

【问题讨论】：

【解决方案1】：

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

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

这将使侧边栏与底部对齐，文本不会被剪切。白条将出现在顶部，但由于底部被切掉，它不会太突兀。

【讨论】：

谢谢！这非常接近解决方案——侧边栏不再滚动几个像素，顶部的白条更容易接受。
我想再等一会儿，看看是否有人有完整的解决方案——感谢您的提醒。附带说明：奇怪的是，在稍微调整了填充之后，Safari 现在至少在大多数情况下也会在左上角渲染背景。很奇怪，但非常感谢！
如果您更新您的 iOS，您会发现问题消失了。我在 iPhone 7 中没有遇到这个问题

【解决方案2】：

添加以下样式以解决问题

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

Here你找到参考

【讨论】：