CODEWITHSUNDEEP
androidcsswebkit
Ingo Bürk
Ingo Bürk

Reputation: 20043

Blurry/Pixelated Images on mobile phone

In my phonegap app I display a 240x240 image in a listview where it is resized to 80x80. This works fine and the image is crisp:

Crisp

However, somewhere else in my app I want to display those images too. Since I want to display a whole lot more of them, I am using sprites. Still, the sprite element (that one image within the sprite) is 240x240 and gets resized to 80x80 again (with background-size), but now it looks like this:

Blurry

If I use a smaller size (like 120x120 or 80x80) and resize it to 80x80, it is not pixelated, but extremely blurry. The only difference to the first case described is using CSS sprites, but so many use them, I can't imagine this to be a problem. Does anyone have an idea what might cause this and how to fix it?

Upvotes: 0

Views: 4469

Answers (3)

Alice
Alice

Reputation: 35

Adding border-radius: 1%; fixed this for me

Upvotes: 0

Ingo Bürk
Ingo Bürk

Reputation: 20043

Just incidentally I found the source of the problem: z-index.

The images are drawn as background images on div elements that live within a wrapping div. If I give them a z-index to ensure that they're on top, they get blurry. Removing the z-index causes them to be rendered perfectly.

Could this actually be a bug in the Webkit engine?

Upvotes: 1

Vasudev
Vasudev

Reputation: 1996

If you are using Paint, confirm the following before using paint instance: 

paint.setAntiAlias(true);
paint.setDither(true);
paint.setFilterBitmap(true);

Upvotes: 0

Related Questions