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

Resolving Blurry Text After CSS Scaling in Chrome

Chrome users have recently experienced text blurring after applying CSS transform: scale(), particularly with the following:

  0% {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">opacity: 0;
-webkit-transform: scale(.3);

Copy after login

}

50% {

opacity: 1;
-webkit-transform: scale(1.05);

}

70% {

-webkit-transform: scale(.9);

}

100% {

-webkit-transform: scale(1);

}
}

This issue persists specifically in Chrome, excluding other Webkit browsers like Safari.

解决方案：

To alleviate this issue, two methods have proven effective:

1. Backface Visibility:

Setting the backface visibility to "hidden" focuses rendering on the object's front, mitigating the problem:

backface-visibility: hidden;<br>

2. TranslateZ:

Using the translateZ property forces hardware acceleration, effectively addressing the blurring:

transform: translateZ(0);<br>

Optionally, additional clarity can be achieved by incorporating:

-webkit-font-smoothing: subpixel-antialiased;<br>

Experimenting with different combinations may further enhance the rendering outcome.

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