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

We had a white line at the bottom of a full page iframe in iPad, so we just set the height to 100.5% and this solved the problem.

Answer 2

The iOS zoom seems to take some data from the next line in the image (maybe rounding error on the interpolation?). I did some tests, and it seems to be a consistent problem. I reported this as a bug to Apple.

Adding 1 line of background-colored pixels to the image (or 1px padding if you will) seems to do the trick. Not ideal but works.

Possibly same problem as Rendering borders bug in Safari mobile on Safari Mobile in general.

Answer 3

Adding this to the block above the line worked for me very well.

margin-top:-1px; /* this overlap the blamed ghost line */
padding-top:1px; /* this gave me my pixel back =) */

if its happening to you in too many blocks you should create a class instead.

Answer 4

If the <div> is not the same color as the background and is white, this is very viewable.
Basically, the background-color in format needs to be the same color as the <div> sitting on top of it or you will get a line.
An easy work around is to change the background-color to match the <div> or make a tile that will cover the areas in the background where the <div> sit.

Answer 5

I also had the same problem in my home page and none of these solutions worked for me. In my particular case it was the background showing up in between the div layers as Johnny up top was saying. I ended up wrapping the existing layers with another div and made it the same background color as the two existing layers and the lines were not visible anymore. If nothing else works give it a try.