在 Chrome 中解决 CSS 缩放后的模糊文本
Chrome 用户最近在应用 CSS 变换：scale() 后遇到文本模糊，尤其是使用以下：
0% {<pre class="brush:php;toolbar:false">opacity: 0;
-webkit-transform: scale(.3);}
50% {
opacity: 1; -webkit-transform: scale(1.05);
}
70% {
-webkit-transform: scale(.9);
}
100% {
-webkit-transform: scale(1);
}
}
此问题在 Chrome 中尤其存在，不包括 Safari 等其他 Webkit 浏览器。
解决方案：
为了缓解这个问题，有两种方法已被证明有效：
1.背面可见性：
将背面可见性设置为“隐藏”可将渲染重点放在对象的正面，从而缓解问题：
backface-visibility:hidden;<br>
2. TranslateZ:
使用translateZ属性强制硬件加速，有效解决模糊问题：
transform:translateZ(0);<br>
可选地，可以通过以下方式获得额外的清晰度合并：
-webkit-font-smoothing：子像素抗锯齿；<br>
尝试不同的组合可能会进一步增强渲染结果。
以上是为什么在 Chrome 中进行 CSS 缩放后我的文本变得模糊，如何修复它？的详细内容。更多信息请关注PHP中文网其他相关文章！
