CODEWITHSUNDEEP
imagehtmlios5cssmobile-safari
marklar
marklar

Reputation: 502

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:

original

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.

Upvotes: 0

Views: 1174

Answers (2)

marklar
marklar

Reputation: 502

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.

Upvotes: 0

Connor
Connor

Reputation: 1034

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

background-image: url([email protected]);

Upvotes: 1

Related Questions