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

Question

我发现Chrome和其他WebKit浏览器大量模糊任何已应用translate3d的css缩放内容的问题.

这是一个JS小提琴: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 - 这里的重点是将代码剥离到最基本的要素.

Answer 1

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

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

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

Answer 2

我发现使用:

-webkit-perspective: 1000;

在你的字体或图标集的容器上,在Android nexus 4.2上试验了一段时间之后让我保持清醒.

Answer 3

css过滤器效果是一种图形操作,允许操纵任何HTML元素的外观.自从Chromium 19以来,这些滤波器都是GPU加速,使它们超快.

CSS3引入了一堆标准滤镜效果,其中一个是模糊拟合:

-webkit-filter: blur(radius);

"半径"参数会影响屏幕上有多少像素相互融合,因此较大的值会产生更多模糊.零当然会使图像保持不变.

将半径设置为0将强制浏览器使用GPU计算并强制它保持您的html元素不变.这就像应用"硬边"效果.

因此,为了解决这种模糊效果,我的最佳解决方案是添加这一简单的代码行:

-webkit-filter: blur(0);

还有一个已知的病毒只影响视网膜屏幕.(请参阅此处:为什么不模糊(0)在视网膜屏幕上删除Webkit/Chrome中的所有文本模糊？).所以为了使它也适用于视网膜,我建议添加第二行:

-webkit-transform: translateZ(0);

Answer 4

试试这个

 ...{
zoom:2;
-webkit-transform: scale(0.5);
transform: scale(0.5);
}

或者,对于更精确的方法,您可以通过删除矩阵的十进制值来调用javascript函数来重新计算变换矩阵.请参阅:https://stackoverflow.com/a/42256897/1834212