33

When i put transform: scale(1.1); on hover on some element the image became blurry. How to fix this bug?

Example

enter image description here

Mosh Feu
  • 28,354
  • 16
  • 88
  • 135
Viktor Zahov
  • 333
  • 1
  • 3
  • 4
  • Possible duplicate of [-webkit-transform: scale / blurry images](https://stackoverflow.com/questions/27060690/webkit-transform-scale-blurry-images) – Gajus Aug 16 '17 at 09:59

4 Answers4

59

Try this, it's work fine for me!

img {
    -webkit-backface-visibility: hidden; 
    -ms-transform: translateZ(0); /* IE 9 */
    -webkit-transform: translateZ(0); /* Chrome, Safari, Opera */
    transform: translateZ(0);
}
dimitar
  • 1,019
  • 13
  • 19
  • 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. The image I used is an SVG vector. It's just a Safari thing I guess. – Daniel W. Oct 01 '19 at 09:31
  • As far as could figure out it works if you scale up the outer container (above 1) and scale down the image (less than 1). Example: https://jsfiddle.net/5mf7naxh/4/ – axel wolf Feb 14 '20 at 16:30
  • Issue appears in Firefox 100 - adding -webkit-backface-visibility: hidden to the element with the transform: scale(n.n) attribute resolved the issue – Dale Anderson May 17 '22 at 01:46
6

TL;DR transform: scale is actually scaling the original image, and because you are leaving it to the browser's render engine to figure out what should go there you got a blurry image. try

img {
transform: scale(.9)    
}

img:hover {
transform: scale(1)
}

Aaron Sibler answered the question for me.

I just experienced this riddle. In your example, you’ll need to transform img DOWN something like “transform: scale(0.7)” and then scale UP to the images native dimensions on hover like “transform: scale(1.0)”

The scale value is relative to the original image’s dimensions – not their current dimensions on screen so a scale of 1 always equals the original image’s dimensions.

I’ve used this here;

http://meetaaronsilber.com/experiments/css3imgpop/index.html

peterh
  • 11,875
  • 18
  • 85
  • 108
axecopfire
  • 512
  • 5
  • 16
  • This didn't work for me because it made the image smaller than it needs to be initially – Paul Nov 17 '21 at 19:42
0

I had this problem with SVG scaling and blurry images. I scaled up a background image to 4.5 and the image rendered very blurry while scaling up. I read that you can scale down first transform: scale(0.7) and then scale up to transform: scale(1.0). In my case this meant a huge rebuild of my animation. I had a very complex animation with multiple scales and transforms etc.

I just left all as is and added a pseudo scale width. The browser then seems to re-render every frame, but since the width does not actually change you still can use transform: scale(x.x) for scaling and you get a very sharp image.

Maybe someone can confirm this. Here is my code. In my case the image was 86px wide and it zoomed up to 4.5 times the initial value.

<div class="overall-scale">
 <div class="image-scale"></div>
</div>

@keyframes overall-scale {
0% {
    transform: scale(1);
}

100% {
    transform: scale(4.5);
}
}

@keyframes image-scale {
0% {
    width: 86px;
}

100% {
    width: 86px;
}
}

Hope this helps and my explanation makes sense.

Please comment if this does not work for you.

Mikaelik
  • 355
  • 3
  • 4
  • 12
0

I' ve read all the comments, and tryied all solutions people suggested. But nothing was really good except rotate(360deg). Everything, except this one made stuttering on images, or they became too blurry initially. But rotating is looking strange if you don't hide it. So I decided to rotate for 0.0000001deg and it worked! Image is blurry only during the transition, but at the end and at the start of it it is sharp. May be I just had too small pictures.

So, my current solution is adding this part to CSS (and nothing else):

    img {
      transform: rotate(0.00000000001deg);
    }
Kades
  • 17
  • 5