在 Safari iOS 上滚动时背景覆盖被裁剪

Question

以前有人遇到过这种情况吗？在手机上浏览时，我将网站导航位置设置为固定width: 100%和height: 100vh

在 iOS 上的 Chrome 和 Safari 上滚动时，导航的底部会被裁剪掉：

我想出的解决方法是从导航中删除背景颜色，而是将主体背景颜色设为蓝色并使其内容半透明。

body > *:not(#main-nav) {
    opacity: 0.5;
}

此解决方案有效，但我宁愿找到一种使用叠加层的方法。

Answer 1

我最近遇到了同样的问题，最后发现这解决了它：

top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
position: fixed;