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

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/

Answer 2

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 3

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.

Answer 4

You could use an image appropriate to the dimensions you are going for. If you can't do that then you could use a callback method to replace the resized image with an image that is the size of the new dimensions. What you are doing is no different than stretching an image (in fact thats exactly what you're doing) so there is going to be pixelation.

Answer 5

Solved in 2013. https://bugs.webkit.org/show_bug.cgi?id=74600

image-rendering: optimizeQuality;

Answer 6

I had the exact same problem. I changed the *.jpg that I was animating the size of, to a *.svg and the pixelation went away.