Why is My Text Blurry After Using CSS `transform: scale()` in Chrome?

Fixing Blurry Text After CSS Transform: scale() in Chrome

Chrome users have reported a recent issue where text becomes blurry after applying a transform: scale() animation. This problem is exclusive to Chrome and doesn't affect other Webkit browsers like Safari.

The following CSS animation is causing the blurriness:

@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(.3);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
  }

  70% {
    -webkit-transform: scale(.9);
  }

  100% {
    -webkit-transform: scale(1);
  }
}

To resolve this issue, you can use either of the following properties:

• Backface Visibility:

backface-visibility: hidden;

This property simplifies the animation to only affect the front of the object, eliminating the blurry effect caused by the back surface.

• TranslateZ:

transform: translateZ(0);

TranslateZ forces hardware acceleration on the animation, which can also fix the blurriness.

Additionally, you may opt to include the following property to enhance the rendering:

-webkit-font-smoothing: subpixel-antialiased;

This can slightly alter the appearance of Web fonts, but it might be worth experimenting with.

The above is the detailed content of Why is My Text Blurry After Using CSS `transform: scale()` in Chrome?. For more information, please follow other related articles on the PHP Chinese website!