How to fix blurry Image on transform scale

Question

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

Example

Answer 1

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

Answer 2

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