Search code examples
cssiosiphonevisual-glitch

iOS Glitch: gap/space above 100vh body

On iOS (15.3) when using a 100vh html/body, the displayed page has a small gap/space above the body tag on first load with real iOS devices (tested on iPhone 8).

After analysing and reducing the content, it turns out that it is independent of the html markup.

enter image description here

Solution

  • Debugged this for quite some time, and finally found a fix.

    Add the following code to your css. My guess is that the repaint adjusts the layout correctly. If the translateY doesn't work for you, try another way to trigger a repaint.

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