iPhone Safari下100vh固定遮罩滚动闪烁问题求解

在iPhone Safari中，用100vh/svh/dvh设置全屏固定遮罩时，滚动触发导航栏收缩会导致遮罩尺寸无法即时更新，出现短暂闪烁、底部透底的问题——这是因为Safari的视口高度会随导航栏状态动态变化，而vh类单位的更新存在延迟。以下是几个实用的解决办法：

方案1：用四边定位替代高度设置（最优解） #

放弃设置width和height，直接通过固定定位的四边属性让遮罩自动填满整个视口，能完美跟随Safari导航栏的动态变化即时调整尺寸，无需额外JS。

修改后的.overlay CSS：

.overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0; /* 替换原width:100%和height:100vh */
    background: rgb(0,0,0);
    background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0) 60%, rgba(0,0,0,1) 100%);
    z-index: 100;
}

方案2：监听视口变化强制重绘 #

如果必须使用高度单位，可以通过监听滚动和窗口resize事件，强制触发遮罩重绘。此方案性能略逊于方案1，适合特殊场景使用。

添加JS代码：

const overlay = document.querySelector('.overlay');

function updateOverlaySize() {
    // 触发重绘强制更新尺寸
    overlay.style.height = '100%';
    requestAnimationFrame(() => {
        overlay.style.height = `${window.innerHeight}px`;
    });
}

// 绑定事件并初始化
window.addEventListener('scroll', updateOverlaySize);
window.addEventListener('resize', updateOverlaySize);
updateOverlaySize();

方案3：添加底部缓冲（临时应急） #

给遮罩设置足够大的最小高度，配合overflow: hidden避免导航栏收缩时露出底部。此方案属于临时 workaround，极端场景下可能失效。

修改后的.overlay CSS：

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 105vh; /* 增加缓冲高度 */
    height: 100%;
    background: rgb(0,0,0);
    background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0) 60%, rgba(0,0,0,1) 100%);
    z-index: 100;
    overflow: hidden;
}

推荐优先级 #

优先选择方案1，它利用CSS原生定位特性，无性能损耗，完全适配Safari的动态视口逻辑。

内容的提问来源于stack exchange，提问作者Røsholm