Single/sub pixel misalignment of divs on ipad and iphone safari

Question

I've got the following situation, and I need some help...

1. Two divs, same size, same location, one on top of the other
2. Everything works as expected on desktop browsers
3. On the iphone/ipad a faint line appears around the border of the divs
4. This faint line is not always on all four borders. It changes depending on the location of the divs. It looks to be happening as a result of the two divs not lining up properly, but according to their style settings, they are of identical size and location.

You can see the results here: http://www.thoughtartistry.com

Any ideas?

Answer 1

I had a similar problem in a recent project where I had background image masks with different background color to colorize the resulting icons in mobile Safari. The problem was that when the page was scaled down by Safari, there was a line of the background color showing around the image, even though it should have been masked. I never found a way to prevent that leaking of the background color when the page is scaled down. It's clearly an error in mobile Safari's algorithms that recalculate the background and mask. I did find a workaround: I put an outline on the element with the same color as the background of the element's parent. The outline is outside the element and therefore masks the part bleeding out. If your element's parent has a pattern background that's drastic, this won't work that well, but if it's a solid color, it'll do just fine.