CODEWITHSUNDEEP
csssafaritransformscale
grindking
grindking

Reputation: 937

Using transform: scale results in blurry images

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: https://i.sstatic.net/NaFeB.jpg

enter image description here

Upvotes: 29

Views: 39453

Answers (2)

Dan Knights
Dan Knights

Reputation: 8368

For anyone who didn't find the accepted answer useful, adding this on the parent container worked for me:

transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);

Upvotes: 13

spinsch
spinsch

Reputation: 1415

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

Upvotes: 48

Related Questions