Search code examples
htmlcssmobile-safari

Why is there a visible gap between adjacent DIVs on iOS Safari?

After pulling all my hair out it has come down to this minimal html page that seems to be rendering wrongly on iOS:

<!doctype html>
<html>
<head>

<style type="text/css">

#fold
{
    background:url(https://s3.amazonaws.com/gigantt_pub_imgs/2012/07/1342078193.png) top left;
    min-height:350px;
}


#features
{
    background:url(https://s3.amazonaws.com/gigantt_pub_imgs/2012/07/1342078193.png) top left;
    min-height:350px;       
}   
</style>
</head>
<body>
    <div id="fold">
    </div>
    <div id="features">

    </div>
</body>
</html>

When viewing in iOS (or for that matter in the iOS simulator) you can see a while line between the two blue divs.

enter image description here

This white line disappears if you zoom in. And of course it's not visible in any other desktop browser I've tried, either.

So, am I going nuts or is anybody else getting this? Any idea how to work around it?

Solution

  • It could be construed as a bug (I think it is) - but it has to do with the way iOS handles background images.

    The quick answer - add a negative margin to one of your elements. See this JSFiddle.

    The relevant portion is this:

    #features
{
    background:url(https://s3.amazonaws.com/gigantt_pub_imgs/2012/07/1342078193.png) top left;
    min-height:350px;
    margin-top: -2px;    
}

    You can target this using media queries.