android translate模糊,css3-WebKit：使用css缩放+ translate3d的模糊文本

css3-WebKit：使用css缩放+ translate3d的模糊文本

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

这是一个JS小提琴：[http://jsfiddle.net/5f6Wg/。](在Chrome中查看)。

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

8个解决方案

33 votes

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

看这里：[http://jsfiddle.net/SfKKv/]

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

methodofaction answered 2019-11-11T02:50:23Z

33 votes

我发现使用：

-webkit-perspective: 1000;

在一段时间内尝试使用Android nexus 4.2的问题后，字体或图标集容器上的内容对我来说还是很清脆的。

hallodom answered 2019-11-11T02:50:54Z

29 votes

css滤镜效果是一种图形操作，它可以操纵任何HTML元素的外观。 自Chromium 19起，这些过滤器已通过GPU加速以使其超快。

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

-webkit-filter: blur(radius);

“半径”参数会影响屏幕上彼此融合的像素数，因此值越大，越会产生更多的模糊。 零当然会使图像保持不变。

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

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

-webkit-filter: blur(0);

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

-webkit-transform: translateZ(0);

maoosi answered 2019-11-11T02:51:51Z

5 votes

试试这个

...{

zoom:2;

-webkit-transform: scale(0.5);

transform: scale(0.5);

}

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

Miguel answered 2019-11-11T02:52:16Z

2 votes

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

chuckles answered 2019-11-11T02:52:40Z

0 votes

我使用javascript将文本顶部移动了1px，然后在100ms之后将文本向下移动了1px。 几乎无法感知并且完全跨浏览器解决了该问题。

Mixtelf answered 2019-11-11T02:53:05Z

-1 votes

body {

-webkit-font-smoothing: subpixel-antialiased;

}

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

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

placeboaddict answered 2019-11-11T02:53:34Z

-2 votes

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

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

与上述相同^

Tom answered 2019-11-11T02:54:12Z