Line artifacts in mobile Safari

Question

Safari renders black lines in between divs on my website at some scales. It is particularly bad when it breaks apart an image that is chopped in two different divs for a but

Answer 1

TravisO, you should get rid of the img styling in your css! If you use only this:

<style type="text/css">
*
{
    margin: 0px;
    padding: 0px;
}

body
{
    background-color: #f00;
    text-align: center;
}
</style>

it should render properly on your iPhone!

Answer 2

I had a similar problem when displaying a .png-image in a div-tag. A thin (1 px I think) black line was rendered on the side of the image. To fix it, I had to add the following CSS style: box-shadow: none;

Answer 3

I found changing the background colour of the element with the 'grey border' around it worked for me.

Answer 4

Adding an initial-scale value to the viewport metatag resolved this issue for me.

<meta name="viewport" content="initial-scale=1.0">

Answer 5

This issue is a result of a rounding error produced in mobile safari when it rescales background images for display (it's a bug: http://openradar.appspot.com/8684766).

The solution is to increase the width of your right-button edge on its left side by 1 or 2px. Then adjust your CSS accordingly so the 1 or 2 pixels you added are not displayed by default.

Answer 6

The following CSS, added to the problematic div with a specified background-image, is what fixed it for me. Anything less than 3px would still show light artifacts at some Safari zoom levels.

margin-top: -3px; /* for Mobile Safari dark line artifact */
padding-top: 3px; /* for Mobile Safari dark line artifact */