CSS sprites messed up on iphone

Question

I've noticed css sprites seem to show 1 more pixel than they should when viewing them on the iphone. My site works perfectly fine on all major desktop browsers on mac and PC. But when I view it on the iphone you can see 1 pixel of the adjacent sprite image.

Anyone encounter this before? Any suggestions on how to cleanly fix this? I know I could just modify all my sprites to have more separation in between them, but is there an easier way?

UPDATE: Tested zooming with safari, and noticed the exact same problem occurs at certain zoom levels on desktop safari

Answer 1

Add another 1px of space between the icons.

.:edit:.

Just noticed that this was one of your proposed solutions. Check the elements with the sprite and make sure that they are the right size. (Double check the rendered border-box model in Firebug).

It could have something to do with how the mobile phone renders items.

Answer 2

Better late than never:

It's not a bug or a software flaw, it's simple mathematics: the (older) iPhone displays websites at 980px width on a screen that is 320px wide (in portrait mode).

So it's a rounding issue: let's say an element is 50px wide. It is displayed at roughly a third of its size, and that is causing the problem: the iPhone will display it at either 16px or 17px width. Even if it was exactly one third, the problem would remain, and the same applies to various zoom levels, of course.

If it's 16px, you're fine - you have probably noticed that the issue doesn't occur on all your elements. If it's 17px, it means that the element is displayed slightly larger than intended, and the adjacent sprite will show.

I checked apple.om on an iPhone 3G, and even their navigation bar shows some odd little artifacts at the bottom - they're just barely noticeable.

So in theory, it should be enough to add 1px around each sprite. Having to change all these elements is a bummer, but it seems to be the best solution. The problem isn't likely to go away either - the iPhone 4 obviously still scales things down, at least in portrait mode. Not to mention all the other smartphones out there with far inferior screens.