Search code examples
cssipadsafarimobile-safaricss-sprites

ipad showing my sprite images incorrectly

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.

here's a screenshot

Any help would be appreciated. Thanks!

Solution

  • 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