"If a worker wants to do his job well, he must first sharpen his tools." - Confucius, "The Analects of Confucius. Lu Linggong"
Front page > Programming > Why is My Text Blurry in Chrome After Using `transform: scale()`?

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

Published on 2024-12-24
Browse:681

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;
Latest tutorial More>

Disclaimer: All resources provided are partly from the Internet. If there is any infringement of your copyright or other rights and interests, please explain the detailed reasons and provide proof of copyright or rights and interests and then send it to the email: [email protected] We will handle it for you as soon as possible.

Copyright© 2022 湘ICP备2022001581号-3