iOS 故障：gap/space 高于 100vh 体

Question

在 iOS (15.3) 上，当使用 100vh html/body 时，显示的页面在使用真实 iOS 设备首次加载时在正文标签上方有一个小的 gap/space （在 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);
    }
}

iOS 故障：gap/space 高于 100vh 体

iOS Glitch: gap/space above 100vh body

css

ios

iphone

visual-glitch