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

Question

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

对内容进行分析缩减后，原来是独立于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);
    }
}