Thin gray/black lines on web page viewed with iPad

Question

We\'re finding the the iPad is displaying thin grey/black lines on our site. It seems to be some form of scaling-artefact on mobile Safari. I\'ve provided two snippets of

Answer 1

If the answers above don't work for you as they didn't for me there is an extra thing you may wish to try which did solve me issue:

border-bottom: 1px transparent solid ;
margin-bottom: -1px ; /* for Mobile Safari dark line artifact */

Adding a border a transparent border to the bottom seemed to help, my reasoning is that it still tries to render a border and even though it's transparent it forces it to re-render those pixels. That however is pure conjecture but the solution seems to work!

Answer 2

Since this is triggered by background color just use a 1px gif bg image of the same background color and repeat it. If you use modernizr you can write something like this:

.touch .class-of-td { background: transparent url(../_img/services/1px-bgfix.gif) repeat; }

This also works for elements that are displayed table-cell to get vertical-align: middle.

Answer 3

I was having this same issue with 1px lines showing up in desktop browsers and on the iPad and iPhone.

Here was my old css:

html,body {

background:url(images/bg.jpg);
height:100%;
    background-color:#E8E8E8;
text-align:center;
text-decoration:none;
width:auto;

}

My new css:

html,body {

background:url(images/bg.jpg);
height:100%;
text-align:center;
text-decoration:none;
width:auto;

}

Removing "background-color:" has fixed this problem with all of my sites.

Answer 4

In my particular case, the offending div would not be fixed with margin:-1px or border tricks. I had a div with:

height: 0px; 
padding-bottom: 57.2%;

-- this is a trick to create an element that retains its proportions at different widths, because the padding top/bottom derives the percentage from the width. In my case, I was able to fix it by changing this to:

height: 1px; 
padding-bottom: 57.2%;

IMPORTANT: it is worth noting that I found a refresh of the offending page, even with changed styles, did not remove the line, even when I hid the body*. To remove the lines each time they came back, I had to reboot the device.

• ( body {display:none} that is, not tampering with evidence)

Answer 5

I tried a bunch of fixes to remove these grey-ish tiny lines when mobile-safari was zoomed in, and the simplest and most flexible fix I found was here:

http://www.oddodesign.com/2010/css-tip-how-to-prevent-div-seam-lines-from-appearing-in-apples-mobile-safari/

Essentially, you add

margin-bottom:-1px;

To elements that are getting phantom line borders added.

Answer 6

I had a greyish line (iPad only) at the bottom of my header bar and fixed it with:

position:relative;
z-index:2;

directly added to the header container. perhaps this could also help out someone.