iOS Development

html – Setting `overflow: hidden` on “ ends in 1px white padding on iOS Safari

August 6, 2022

[ad_1]

I’ve a background picture for a webpage that’s too large, and generally, I wish to stop scrolling on the webpage. The HTML appears like this

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

and the CSS appears like

html, physique {
    peak: 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 appears good and scrolling is prevented); nevertheless, in iOS Safari, the overflow: hidden; (which prevents scrollbars/scrolling) appears to introduce ~1px of white area round the proper and backside of the show space. I can eliminate the margin by doing one thing like padding: 1px as a substitute of padding: 0, however then the scrollbars come again. Any concepts on the best way to eliminate 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 bought scrollbars or the odd small margins on backside and proper).