Resizing the image gives a little short-term pixelation in WebKit browsers

Question

jsfiddle: http://jsfiddle.net/UenFN/ . Pay attention to the small short-term pixelation after the animation. This error occurs only in WebKit browsers.

Using jQuery, I have a smaller image size. New sizes are half the old. However, immediately after resizing, the image looks slightly pixelated, then after about 2 seconds it looks better.

How can I fix this problem?

EDIT: Still no progress. Any idea is appreciated.

Answer 1

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

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

Answer 2

The solution is to enable hardware acceleration in Webkit.

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

I have a small library that resizes the image and HTML so that it always matches the parent div. Safari listened to me in his unique way to make a quick and dirty passage before doing bicubic. Forced hardware acceleration solved the problem. In my case, when I make a lot of changes, I notice some degradation in performance, but in the end the overhaul result is more attractive.

You can check this fix here: http://www.visualfox.me/app/nanjing-2014 In Safari, the image used as a mask never has pixels, regardless of resizing, scaling or zooming out (just change the size of the browser to check it out). You can compare this with this other demo that does not use the fix: http://www.visualfox.me/app/bold Note that the logo changes in pixels when the browser is resized.

my! enjoy it!

Answer 3

I found that the only time it does not is when the size at the end is the image's own size.

150 to 300 pixels, lack of pixelation ...

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

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

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

So a fix or workaround would be to make sure your final size is the size of your own image, where possible.

Answer 4

You can use the image corresponding to the sizes that you are going to use. If you cannot do this, you can use the callback method to replace the modified image with the image, which is the size of the new dimensions. What you are doing is no different from stretching the image (in fact, this is exactly what you are doing), so there will be pixelation.

Answer 5

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

 image-rendering: optimizeQuality; 

Answer 6

I had the same problem. I changed * .jpg that I animated the size to * .svg, and the pixelation disappeared.