image resize gives slight, brief, pixelation in WebKit browsers

Question

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.

Answer 1

The solution is to enable the Hardware Acceleration in Webkit.

img {
    -webkit-transform: translate3d(0, 0, 0);
}

I have a small library which resize image and HTML to always fit the parent div. Safari bugged me with its own unique way to do a quick and dirty pass before doing the bicubic one. Forcing the hardware acceleration solved the issue, In my case as I do a lot of resizing I do notice some performance degradation yet in the end the overhaul result is more appealing.

You can test this fix here: http://www.visualfox.me/app/nanjing-2014 Under Safari the image used as a mask is never pixelated, regardless of the resizing, upscale or downscale (just resize the browser to test it). You can compare that with this other demo which doesn't use the fix: http://www.visualfox.me/app/bold Notice how the logo is temporally pixelated when you resize the browser.

my! enjoy!

Answer 2

I discovered that the only time it does not do it is when the size upon completion is the native image size.

from 150 to 300 pixels, no pixelation...

http://jsfiddle.net/UenFN/1/

and from 450 to 300 pixels, still no pixelation...

http://jsfiddle.net/UenFN/2/

So the fix, or workaround, would be to make sure your final size is the native image size wherever possible.