html – Setting `overflow: hidden` on “ leads to 1px white padding on iOS Safari


I’ve a background picture for a webpage that’s too huge, and on the whole, I need to stop scrolling on the webpage. The HTML seems like this

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Take a look at</title>
        <hyperlink href="fashion.css" rel="stylesheet" />
    </head>
    <physique>
        <div id="header">
            Take a look at
        </div>
    </physique>
</html>

and the CSS seems like

html, physique {
    top: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
    overflow: hidden;
}

physique {
    background-image: url("bg.jpeg");
    background-size: cowl;
    background-clip: padding-box;
    show: desk;
}

This code principally achieves the specified impact (background picture seems good and scrolling is prevented); nonetheless, in iOS Safari, the overflow: hidden; (which prevents scrollbars/scrolling) appears to introduce ~1px of white house round the fitting and backside of the show space. I can do away with the margin by doing one thing like padding: 1px as a substitute of padding: 0, however then the scrollbars come again. Any concepts on do away with this small whitespace whereas nonetheless stopping scrolling?

I attempted including a wrapper <div> for all of the <physique> content material and setting the background and overflow properties on the <div>, however nonetheless did not have luck (both received scrollbars or the odd small margins on backside and proper).