Why is My Text Blurry in Chrome After a CSS Transform?

Chrome Blurs Text After CSS Transform: A Guide to Fixing

In recent Chrome updates, users have encountered a peculiar issue where text becomes blurry after applying a transform: scale() property. A developer seeking assistance described this problem in the following post:

Problem Description:

I'm using @-webkit-keyframes with a scale transform to animate text on my website. However, it's becoming blurry after the scale animation. This wasn't an issue before and doesn't occur in other Webkit browsers like Safari.

Solution:

The suggested solution involves utilizing one or both of the following CSS properties to resolve the rendering issue:

1. Backface Visibility Hidden: This property restricts the animation to the front of the object, eliminating the default animation on both the front and back.

backface-visibility: hidden;

2. TranslateZ: This is a workaround to activate hardware acceleration for the animation.

transform: translateZ(0);

Additionally, some users have reported success by adding the following property:

-webkit-font-smoothing: subpixel-antialiased;

While this method may alter the web font's rendering, it is worth experimenting with for optimal results. Applying any of these solutions or a combination of them should rectify the blurry text issue after CSS transformation in Chrome.

The above is the detailed content of Why is My Text Blurry in Chrome After a CSS Transform?. For more information, please follow other related articles on the PHP Chinese website!