Using transform: scale results in blurry images

css safari transform scale
grindking picture grindking · Nov 21, 2014 · Viewed 30.1k times · Source

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/

enter image description here

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

enter image description here

Answer

spinsch picture spinsch · Dec 5, 2014

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

Related questions

How to force re-render after a WebKit 3D transform in Safari

I'm using CSS 3D transformations to zoom a div, for example: -webkit-transform: scale3d(2,2,1); The scaling itself works fine in any WebKit browser. However, when using this on Safari (mobile or Windows), the content of the div is not re-rendered. …

Read More
CSS Transform causes flicker in Safari, but only when the browser is >= 2000px wide

You read that right. Tested on multiple machines in the office and the only difference between scenarios was browser size. A coworker narrowed it down to a 2000px sweet spot. Lo-and-behold when we each resize our browsers to be >= 2000…

Read More
How to remove the border highlight on an input text element

When an HTML element is 'focused' (currently selected/tabbed into), many browsers (at least Safari and Chrome) will put a blue border around it. For the layout I am working on, this is distracting and does not look right. <…

Read More