底部神秘的白色条纹 Safari iOS

Question

I have a website where an unwanted white stripe is appearing at the very bottom, and this only for mobile Safari iOS visitors.

I'm using the following code for the footer area to stick it to the bottom:

<div class="page_wrapper">
    <!-- Content here -->
</div>
<div id="footer">
    <div class="footer_sticker">    
        <div class="footer_upper">
            <!-- Content here -->
        </div>
        <div class="footer_lower">
            <!-- Content here -->
        </div>
    </div>
</div>



#footer, .page_wrapper:after {
    height: 275px;
}
.page_wrapper:after {
    content: "";
    display: block;
}
.page_wrapper {
    margin-bottom: -275px;
    min-height: 100%;
}
#footer {
    position: relative;
}
#footer .footer_sticker {
    bottom: 0;
    height: 275px;
    position: absolute;
    width: 100%;
}

Answer 1

Question from bygone era but, I encountered the issue today, when changing the view from portrait orientation to landscape. So here's my solution:

My Research:

NOTICE: When changing from portrait to landscape - the address-bar is hidden and when you change back to portrait (from landscape) the address-bar appears slowly (takes a split sec). THAT'S THE PROBLEM! .

You see, that magical white strip at the bottom is almost the same height as address-bar + mobile top bar

Basically CSS height: 100%/100vh is painted before all those magic happens and we get that annoying blank white bar at the bottom.

How I solved

By calculating the height of the document in a delay (of say 200ms) so I can get the final height of the document after all the effects and set the document height with the new value.

Here's what I meant:

var timerHandler;
timerHandler = setTimeout(() => {
   document.documentElement.style.height = `${window.innerHeight}px`;
}, 350)

Hope it helps someone!

Answer 2

In my case, I had a 1-2 pixel white line appearing at the bottom of the page and to the right of the page on Safari 16.0 on macOS Monterey. After trying all sorts of things, the problem was solved by closing and re-opening the tab. I don't know how the tab acquired those extra pixels...