Why is My Chrome Text Blurry After CSS Transform, and How Can I Fix It?

Blurry Text in Chrome After CSS Transform: Resolved with Backface Visibility Hidden and TranslateZ (0)

Scaling text using CSS transform: scale() can result in blurriness in recent versions of Google Chrome. This is evident in the main text area of http://rourkery.com, where the text appears smudged after transformation.

The solution to this issue lies in employing specific CSS properties. Adding backface-visibility: hidden simplifies the animation by focusing solely on the front of the object. The translateZ(0) property simulates hardware acceleration for smoother animation.

By incorporating these properties into the affected element, the blurriness is effectively eliminated. Here's an example snippet:

@-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);
    backface-visibility: hidden;
    transform: translateZ(0);
  }
}

For added clarity, some developers may also include -webkit-font-smoothing: subpixel-antialiased to enhance font rendering. However, the necessity of this property varies and is subject to personal preference.

The above is the detailed content of Why is My Chrome Text Blurry After CSS Transform, and How Can I Fix It?. For more information, please follow other related articles on the PHP Chinese website!