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.
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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With