Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Image scaling worse in latest Webkit (including Safari 5.1)?

I've been working on something that relies heavily on large images being scaled down with CSS/JavaScript. Before Safari 5.1 came out, I noticed that the images were nice and smooth in Safari, but kind of jagged in Chrome. Now Safari 5.1 seems to be just as bad as Chrome.

The image-rendering CSS property doesn't seem to make a difference. Most posts online about it seem to be from people wanting nearest-neighbor smoothing instead of bicubic, while I need the opposite: getting my images to be smoother.

I attached two images. One shows scaling in Safari and the other one in Firefox. If you look at the model's arm on the left you can see the difference there especially.

Safari image scalingFirefox image scaling

like image 922
Bart S. Avatar asked Aug 11 '11 20:08

Bart S.


1 Answers

I'm guessing using CSS3 transform may produce better result because it uses hardware acceleration. So I created a fiddle that scale some images with both css width and height and CSS3 transform (click here to see) to check it out and make sure but I don't have a good eye or maybe monitor, I didn't saw any difference between css scaled or -webkit-transform: scale() scaled versions. Please look at fiddle and let me know if you saw any difference.

Fiddle: http://jsfiddle.net/EWf25/1/embedded/result/

like image 55
Mohsen Avatar answered Oct 21 '22 15:10

Mohsen