在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;