0

I have this element that on click has a scale animation, while the animation is taking place, the text becomes too blurry, and then returns to it´s normal appereance, it looks like the font-size changes, but that is not happening, it is the extreme blurryness that is added to the text while scaling.

animated gif shows the problem

Check at the end of the transition how the text "loses" the blurryness.. it really looks bad.

I have tried adding these CSS properties:

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

to the div that contains the text (.content) but it makes things worse on Chrome...can´t seem to remove the blurryness.

Is there anything that can fix this via CSS? Or should I try a Javascript solution?

looks bad
Yala Yala Herzlin
  • 552
  • 2
  • 8
  • 25

1 Answers1

0

To my knowledge this is a known issue in Chrome and has to do with rounding issues in floats. If you execute any transform on elements that have well-defined edges, and their edges are transformed to uneven pixel offsets, this is the result. The only solution is to make sure the positioning is always rounded.

This issue can also be reproduced by using a google font inside a div with the properties position: absolute; top: 50%, left: 50%, transform(-50%, -50%);

For further reference you can also check this related post: Blurry text after using CSS transform: scale(); in Chrome

BRO_THOM
  • 824
  • 9
  • 24