IPad incorrectly displays my sprites

Question

I am wondering if this is something somewhat simple, but I only have a problem with the iPad with my photos. I have a tag that I use a sprite to display a star image (similar to gmail or picasa) to indicate my favorite. In any other browser (including safari) on the computer, all this is completely normal.

The problem is the iPad, it shows more sprite than necessary, and it looks weird. It is even more strange that this image is repeated several times, and this does not seem to happen sequentially.

Is this some kind of problem with the zoom problem or the problem of adjusting the viewport specifically for the iPad? It drives me crazy, and everything I do to fix it cuts off part of the image and ruins the normal browsing experience.

Here is an example of what I mean, since I cannot put the page I'm working on now. On this site, which I worked on in the past, the viewing options look strange on the iPad: http://demo.qlikview.com/index.aspx?section=Life For example, the “Download” view option looks different in the FEMA application, than in the Kick It app, so it doesn't even seem consistent.

Any help would be greatly appreciated. Thanks!

Answer 1

This is because the iPad scales your page.

The size of your element in which the sprite is used is scaled, and the image of the sprite -. But it does not seem to behave exactly.

The same thing happens when you zoom out on a safari. This is because the image does not scale equally in the browser, and then the dom element. The dom element is displayed as a vector object. Therefore, when you zoom in or out, the lines remain sharp. When you do the same with a bitmap. It becomes blurry, and the browser needs to guess how the image will look like smaller or larger.

You have two options:

• use extra space between sprites.
• use EM, not pixels in CSS.

PS: Do not use! important in your CSS

Answer 2

As noted by me, the best option would be to leave a space between the sprites .

There is also one last thing you can do that does not allow the user to scale the webpage by putting the next line in its tag. It would look exactly like what you are viewing in a browser, which is pretty neat if you have a lot of elements confused on the iPad due to a problem with the sprite.

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

Good luck

Answer 3

The easiest fix for this is to draw a diagram around your anger with the border color the same as the background color of the parent container. The outline is outside your element and does not affect the layout. What you see is the problem that mobile Webkit has when scaling images with background color or background images, they expire from the container. The outline will sit on top of it and cover it.

Answer 4

What I usually do is simply define individual images (unprinted) for iPad users. I know that it does not load as fast as you hope with the help of piracy images, but I believe that is the price they have to pay. I have separate images on the server using @media in your stylesheet to define different images for iPad browsers. A quick overview of using @media for iPad can be found at:

http://css-tricks.com/snippets/css/ipad-specific-css/

Answer 5

I just ran into this problem. I leave extra space between my sprites since I first noticed the flaws of the iPad. However, in my current project there were sprites and another element with CSS3 transforms. The combination made the sprites blur, with a weird clipping around the edges. I actually found a fix in No longer processed borders in iOS . Try applying the following CSS to your sprites:

 /* IOS fix for incorrectly scaled sprites */ -webkit-background-clip:padding-box; background-clip:padding-box; 

These few lines worked in my project. Of course, YMMV.