Home/ Questions/Q 8222771
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T14:23:27+00:00

After pulling all my hair out it has come down to this minimal html

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0