Blurry text after using CSS transform: scale(); in Chrome

Question

I have have this problem a number of times and there seems to be 2 ways of fixing it (shown below). You can use either of these properties to fix the rendering, or both at the same time.

Backface visibility hidden fixes the problem as it simplifies the animation to just the front of the object, whereas the default state is the front and the back.

backface-visibility: hidden;

TranslateZ also works as it is a hack to add hardware acceleration to the animation.

transform: translateZ(0);

Both of these properties fix the problem that you are having but some people also like to add

-webkit-font-smoothing: subpixel-antialiased;

to their animated to object. I find that it can change the rendering of a web font but feel free to experiment with that method too.

After trying everything else here with no luck, what finally fixed this issue for me was removing the will-change: transform; property. For some reason it caused horribly blurry looking scaling in Chrome, but not Firefox.

To improve the blurriness, esp. on Chrome, try doing this:

transform: perspective(1px) translateZ(0);
backface-visibility: hidden;

UPDATE: Perspective adds distance between the user and the z-plane, which technically scales the object, making the blurriness seem 'permanent'. The perspective(1px) above is like duck-tape because we're matching the blurriness we're trying to solve. You might have better luck with the css below:

transform: translateZ(0);
backface-visibility: hidden;

I found that adjusting the scale ratio helped slightly.

Using scale(1.048) over (1.05) seemed to generate a better approximation to a whole-pixel font size, reducing the sub-pixel blurring.

I also used translateZ(0) which seems to adjust Chrome's final rounding step in the transform animation. This is a plus for my onhover usage because it increases speed and reduces visual noise. For an onclick function however, I wouldn't use it because, the transformed font doesn't appear to be as crispy.

Instead of

transform: scale(1.5);

using

zoom : 150%;

fixes the text blurring problem in Chrome.

This must be a bug with Chrome (Version 56.0.2924.87), but the below fixes the bluriness for me when changing css properties in the console('.0'). I'll report it.

filter: blur(.0px)

Sunderls lead me to the answer. Except filter: scale does not exist, but filter: blur does.

Apply the next declarations to the elements that appear blurred (in my case they were inside a transformed element):

backface-visibility: hidden;    
-webkit-filter: blur(0);

It almost worked perfectly. "Almost" because i'm using a transition and while in transition, elements don't look perfect, but once the transition is done, they do.