iOS 5.1.1, html5 images blurry


I'm working on a hyrbid iPhone app, with most of the interface being done in HTML5 and CSS3. Recently, it seems that since the ios 5.1 update specifically, the images in the app have become really fuzzy/blurry, as if they are being stretched out. They are all divs with the background-image property set, and background-size set to 'cover'.

I also have this line in the html index file, but I do not see how it should effect anything

<meta name="viewport" content="width=320"/>

Here's an example of how poorly an image looks. This image is sized at around 2em x 2em, which, if I'm not wrong, should come out to around 32px by 32px with a 16px font-size.

blurred image in app

The original image:


As you can see, the original has a pretty large resolution, and there shouldn't be any stretched in the app when it's 32px by 32px.

Please, this is very frustrating, so any help is greatly appreciated. Like I said, it didn't do this before, it seems to have just come up since the latest iOS 5.1 update.

Problem courtesy of: marklar


Turns out that this was the culprit

-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;

I originally had these in because sometimes my CSS3 animations would cause the screen to flicker, and this fixed that. Well, it seemed to be trading one bag of problems for another, because removing these two styles made everything clear & crisp again.

I did a little bit more looking, and it appears

-webkit-transform-style: preserve-3d;

is rumored to fix the flickering without adding the blur.

Solution courtesy of: marklar


For the retina display, you may want to include an indication of the higher resolution images. Such as:

background-image: url(your-image@2x.png);
Discussion courtesy of: Connor

This recipe can be found in it's original form on Stack Over Flow.