28

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.stack.imgur.com/NaFeB.jpg

enter image description here

Gajus
  • 69,002
  • 70
  • 275
  • 438
grindking
  • 917
  • 5
  • 13
  • 29

2 Answers2

47

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

spinsch
  • 1,415
  • 11
  • 23
  • 1
    Why include the other prefixes to fix a Safari only issue? – Zach Saucier Mar 19 '15 at 15:52
  • 2
    for chrome (and I believe Safari), only -webkit-filter: blur(0) is useful – vcarel Jun 09 '15 at 09:53
  • 2
    btw I have to say a big THANK. You saved my day :-) – vcarel Jun 09 '15 at 12:32
  • 6
    There's so many hacks for transform blurs over the years. We're almost in 2016, has this no end?!...This one solved it for me where no other did (appeared in Chrome on OSX). – Marian Dec 29 '15 at 01:59
  • 3
    While Chrome 77 does automatically resharpen the scaled image, Safari 13.0.1 doesn't and the presented solution does not make Safari resharpen the image either. – Daniel W. Oct 01 '19 at 09:38
10

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);
Daniel_Knights
  • 7,940
  • 4
  • 21
  • 49
  • 2
    This is what finally fixed it for me, particularly putting it on the *parent*. Thank you! – Ryan Biwer May 15 '21 at 00:08
  • In my case, I was scaling the image's parent container, and what fixed the blurriness was adding this style to the `img` itself. Thank you! – AnnaFractuous Sep 30 '22 at 20:31