iOS 故障：100vh 主体以上的间隙/空间

Question

在 iOS (15.3) 上，当使用 100vh html/body 时，显示的页面在首次加载真实 iOS 设备（在 iPhone 8 上测试）时在 body 标签上方有一个小间隙/空间。

在分析和减少内容后，发现它独立于 html 标记。

Answer 1

调试了好久，终于找到解决办法了。

将以下代码添加到您的 css。我的猜测是重绘正确调整了布局。 如果 translateY 对您不起作用，请尝试另一种方式来触发重绘。

/* ------------------------------
    iOS FIX: gap/space above body element on first load
 -------------------------------- */
@media (max-width: 450px) {
    @supports (display: grid) {
        body {
            animation: pageReflow 0.1s;
        }
    }
}

@keyframes pageReflow {
    from {
        transform: translateY(1px);
    }
    to {
        transform: translateY(0px);
    }
}