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);
    }
}