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

Text Blurriness in Chrome after transform: scale()

In recent Chrome updates, a peculiar issue has emerged where text rendered using CSS's transform: scale() property appears blurry. This issue has been observed when using this specific code:

@-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);
  }
}

Visiting rourkery.com in Chrome reveals the problem on the main text area, while other WebKit browsers (like Safari) seem unaffected.

A Solution to the Blurry Text Conundrum

To resolve this issue, two approaches can be employed:

1. Backface Visibility Hidden: This technique fixes the issue by simplifying the animation to just the front of the object, eliminating the default front and back states.

   backface-visibility: hidden;

2. TranslateZ: This hack activates hardware acceleration for the animation, effectively solving the rendering problem.

   transform: translateZ(0);

In addition, some users find adding the following property beneficial:

-webkit-font-smoothing: subpixel-antialiased;

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