Using transform: scale results in blurry images

Question

In our catalog view (online store) we use javascript to get different views of the products and scale the images down with CSS. 3 in a row / 4 or 5/

The default view is 4:

-webkit-transform: scale(0.83); -moz-transform: scale(0.83); -ms-transform: scale(0.83); -o-transform: scale(0.83); transform: scale(0.83); 

Everything works but the images look very blurry in safari. Is there a way to improve the rendering for safari? Bigger Image: http://i.stack.imgur.com/NaFeB.jpg

Answer 1

it works if you reset the blur filter in safari:

-webkit-filter: blur(0px);  

example for all browsers:

filter: none;  -webkit-filter: blur(0px);  -moz-filter: blur(0px);  -ms-filter: blur(0px); filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0'); 

hope it helps