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);

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

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

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

-webkit-filter: blur(0);

还有一个只会影响视网膜屏幕的已知错误。（见这里：Why doesn't blur(0) remove all text blur in Webkit/Chrome on retina screens?）。所以为了使它也适用于视网膜，我建议添加第二行：

-webkit-transform: translateZ(0);

Answer 4

试试这个

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

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

Answer 5

当使用同位素插件（http://isotope.metafizzy.co/index.html）与缩放插件（http://janne.aukia.com/zoomooz/）结合使用时，我遇到了这个问题。我构建了一个jquery插件来处理我的情况。我把它扔进了一个github仓库，万一有人可以从中受益。 - https://github.com/charleshimmer/jquery-hirestext。

Answer 6

我使用javascript移动文本1px顶部然后移动100ms后，返回1px。这几乎是无法理解的，完全跨浏览器解决了这个问题。

Answer 7

body {
-webkit-font-smoothing: subpixel-antialiased;
}

或者我认为你可以把它放在一个特定的元素上，但是我遇到了影响整个网站的一个元素的问题。

我认为这是自定义字体字体的问题。

Answer 8

Webkit将3d变换后的元素视为纹理而不是矢量为了提供硬件3d加速。

这与它无关。你会注意到你的混叠问题可以通过添加持续时间和方向信息来修复（例如0.3线性）。你有一匹母马试图在运行时渲染一切：

以上^

相同

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

8 个答案: