ipad showing my sprite images incorrectly

Question

I'm wondering if this is something somewhat simple, but I'm having a problem ONLY on iPad with my sprited images. I have an tag that I use a sprite for to display an image of a star (similar to gmail or picasa) to indicate a favorite. On every other browser (including safari) on a computer, it's all completely fine.

The problem is on an iPad, it's showing more of the sprite than it should and it looks strange. What's even stranger is that this image is repeated several times and it doesn't seem to happen consistently.

Is this some sort of zoom issue or viewport setting problem specifically for iPad? It's driving me crazy, and anything I do to fix it cuts off some of the image and ruins the normal browser look.

Here's an example of what I mean since I can't put up the page I'm currently working on. On this site I've worked on in the past, the viewing options look strange on an iPad: http://demo.qlikview.com/index.aspx?section=Life For example the "Download" viewing option looks different on the FEMA app than on the Kick It app so it doesn't even appear to be consistent.

Any help would be appreciated. Thanks!

Answer 1

This is because the iPad scales your page.

The size of your element where the sprite is used is scaled and the sprite image to. But it seems not to behave precisely.

The same thing happens when you zoom out in safari. This is because an image is not scaled the same way in the browser then a dom element. A dom element is rendered as vector object. So when you zoom in or out, the lines keep sharp. When you do the same with a bitmap. It gets blurry and the browser need to guess how the image would look like smaller or bigger.

You have two options:

1. use more space between the sprites.
2. use EMs and not Pixels in your CSS

PS: Don't use !important in your css

Answer 2

Like meo pointed out, best option would be to leave space between the sprites.

There is also one last thing you can do, which is not to let the user zoom the web page by putting the following line in your tag. It would look the exact same as you view in the browser, which is pretty neat if you have loads of elements messed up in the iPad because of the sprite issue.

<meta name="viewport" content="minimum-scale=1.0, maximum-scale=1.0" />

Good luck!