css - WebKit:带有 css scale + translate3d 的模糊文本

我看到一个问题，Chrome 和其他 WebKit 浏览器会大量模糊任何也应用了 translate3d 的 css 缩放内容。

这是一个 JS fiddle : http://jsfiddle.net/5f6Wg/ 。 (在 Chrome 中查看。)

.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 加速。唯一的解决方案是增加文本的大小并缩小元素的大小，实质上是创建更高分辨率的纹理。

看这里:
http://jsfiddle.net/SfKKv/

请注意，抗锯齿仍然不足(词干丢失)，所以我用一些文本阴影来加强文本。

关于css - WebKit:带有 css scale + translate3d 的模糊文本，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/8024061/