Search code examples
javascriptjqueryimageprerender

image resize gives slight, brief, pixelation in WebKit browsers

jsfiddle: http://jsfiddle.net/UenFN/. Notice the slight, brief pixelation after the animation. This error only happens in WebKit browsers.

Using jQuery, I have an image resize into a smaller one. The new dimensions are precisely half of the old ones. Right after resizing, however, the image appears slightly pixelated, then about 2 seconds later it looks better.

How can I fix this problem?

EDIT: Still no progress. Any idea is appreciated.

Solution

  • In order to fix this, I inserted the same image a second time, but with the dimensions I want to use. At the millisecond after the animation, I replace the main image with the previously hidden image.

    jsfiddle: http://jsfiddle.net/wLwrc/1/