Search code examples
androidcsswebkit

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?

Solution

  • 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?