60

我看到一个问题，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 - 这里的重点是将代码剥离到最基本的部分。

4

8 回答 8

36

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

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

请注意，抗锯齿仍然低于标准（词干丢失），所以我用一些文本阴影来加强文本。

于 2011-11-07T15:37:42.543 回答
35

我发现使用：

-webkit-perspective: 1000;

在对 Android nexus 4.2 上的问题进行了一段时间的实验后，在你的字体或图标集的容器上让我保持清晰。

于 2013-06-27T08:45:42.743 回答
28

css 滤镜效果是一种图形操作，允许操纵任何 HTML 元素的外观。由于 Chromium 19 这些过滤器是 GPU 加速的，以使其超快。

CSS3 引入了一堆标准的滤镜效果，其中之一就是模糊滤镜：

-webkit-filter: blur(radius);

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

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

因此，为了解决这种模糊效果，对我来说最好的解决方案是添加以下简单的代码行：

-webkit-filter: blur(0);

还有一个只影响视网膜屏幕的已知错误。（请参阅此处：为什么 blur(0) 不删除视网膜屏幕上 Webkit/Chrome 中的所有文本模糊？）。因此，为了使其也适用于视网膜，我建议添加第二行：

-webkit-transform: translateZ(0);
于 2015-09-01T13:46:15.067 回答
5

尝试这个

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

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

于 2016-03-09T13:26:00.247 回答
2

我在将同位素插件 (http://isotope.metafizzy.co/index.html) 与缩放插件 (http://janne.aukia.com/zoomooz/) 结合使用时遇到了这个问题。我构建了一个 jquery 插件来处理我的情况。我把它扔到了一个 github repo 中，以防任何人都能从中受益。- https://github.com/charleshimmer/jquery-hirestext。

于 2012-09-11T20:10:20.223 回答
0

我使用 javascript 将文本移到顶部 1 像素，然后在 100 毫秒后，向下移动 1 像素。它几乎是无感知的，并且完全跨浏览器解决了这个问题。

于 2015-11-13T14:20:02.177 回答
-1 
body {
-webkit-font-smoothing: subpixel-antialiased;
}

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

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

于 2012-07-31T21:26:13.520 回答
-2

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

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

以上同理^

于 2012-01-30T17:12:11.240 回答