html - 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 pages below, with the contrast tweaked to highlight the issue, unfortunately because the iPad display is quite good, these lines are quite noticeable.

They seem to come and go as the page is zoomed, and look like divs/images are being scaled with rounding issues at the edges, causing the edge pixel to be blended with black.

Has anyone found a workaround or fix for this?

Thanks

Answer 1

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.