How to fix blurry background-image on transform scale - css

Question

In my application users can scale down a specific part. I'm using tranform: scale() to achieve this.
I was able to achieve much less blurred images by using
-webkit-backface-visibility: hidden;
-ms-transform: translateZ(0);
-webkit-transform: translateZ(0);
transform: translateZ(0);
on my images.
Sadly this doesn't work for divs with background-image. Those images are still very blury.
Is there a way to fix this? (Please don't tell me to not use scale)

Answer 1

using transforms can cause blurry images when the transition happens or when it rescales, there's a workaround for this...the reason the blur looks like Webkit renders elements as images during animated transforms, so if scaling up an element it appears to blur until the transition has finished.
A solution might be to size the element as big as you will ever need it in the first place, and use a transformation to scale it down for initial display - e.g. if doubling the size on hover, instead of doing "scale(2,2)", start with "size:200%, scale:(.5,.5)" and on hover switch to "scale(1,1)"...
Here's a workaround:
.normal {
width: 200px;
height: 200px;
margin: 1em auto;
transition: all 1s linear;
}
.normal:hover {
transform: scale(2, 2);
}
.prescaled {
width: 400px;
height: 400px;
margin: 1em auto;
transition: all 1s linear;
transform: scale(.5, .5);
// fix positioning due to scale
position: relative;
top: -100px;
}
.prescaled:hover {
transform: scale(1, 1);
}
This one's mainly an idea about how you can implement it in your way...Let me know if it works...