WebKit：带有css缩放和+ translate3d的模糊文本

  • Z时代
  • 2024-01-10
  • 分类：问答

我看到一个问题，其中Chrome和其他WebKit浏览器使任何同时应用了transform3d的css缩放内容严重模糊。

.test {
  -webkit-transform: translate3d(0px, 100px, 0px);
}
.testInner
{
  /*-webkit-transform: scale(1.2);*/
  -webkit-transform: scale3d(1.2, 1.2, 1);
  text-align: center;
}
<div class="test">
  <div class="testInner">
    This is blurry in Chrome/WebKit when translate3d and scale or scale3d are applied.
  </div>
</div>

有任何已知的解决方法吗？在上面的简单示例中，我得到了答案，我可以简单地使用translate而不是translate3d-这里的重点是将代码剥离为基本要素。

回答：

Webkit将3d变换后的元素视为纹理而不是矢量，以提供硬件3d加速。唯一的解决方案是增加文本的大小并缩小元素的尺寸，实质上是创建更高的res纹理。

请注意，抗锯齿效果仍然欠佳（词干丢失），因此我在文本上加了一些阴影。

以上是 WebKit：带有css缩放和+ translate3d的模糊文本 的全部内容， 来源链接： utcz.com/qa/417403.html

回到顶部