CODEWITHSUNDEEP
htmlcsshoverblurry
Viktor Zahov
Viktor Zahov

Reputation: 373

How to fix blurry Image on transform scale

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

Upvotes: 37

Views: 62757

Answers (5)

lewishole
lewishole

Reputation: 573

Fix it in modern browser

img {
    will-change: transform;
}

The will-change CSS property hints to browsers how an element is expected to change. Browsers may set up optimizations before an element is actually changed.

Documentation https://developer.mozilla.org/en-US/docs/Web/CSS/will-change

Upvotes: 1

Kades
Kades

Reputation: 35

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);
    }

Upvotes: 0

axecopfire
axecopfire

Reputation: 652

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

Upvotes: 7

Mikaelik
Mikaelik

Reputation: 375

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.

Upvotes: 0

dimitar
dimitar

Reputation: 1057

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);
}

Upvotes: 61

Related Questions