WebKit：模糊的文本与CSS规模+ translate3d

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变换的元素视为纹理而不是vector，以便提供硬件3D加速。 唯一的解决办法是增加文本的大小和缩小元素，实质上创build一个更高的res纹理。

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

请注意，抗锯齿仍然是underpar（茎损失），所以我用一些文字阴影增强了文本。

Answer 2

我发现使用：

 -webkit-perspective: 1000; 

在你的字体或图标集的容器上，在经历了一段时间的Android nexus 4.2问题的实验之后，为我保留了一些清爽的东西。

Answer 3

一个CSS滤镜效果是一个graphics操作，允许操纵任何HTML元素的外观。 由于Chromium 19这些filter是GPU加速，使他们超快。

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

 -webkit-filter: blur(radius); 

“半径”参数会影响屏幕上有多less像素相互混合，所以较大的值会产生更多的模糊。 零当然会使图像保持不变。

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

所以为了解决这个模糊的效果，对我来说最好的解决scheme是添加这个简单的代码行：

 -webkit-filter: blur(0); 

还有一个只影响视网膜屏幕的已知的错误。 （请参阅： 为什么不模糊（0）删除视网膜屏幕上的Webkit / Chrome的所有文字模糊？ ）。 所以为了使它也适用于视网膜，我build议添加这第二行：

 -webkit-transform: translateZ(0); 

Answer 4

尝试这个

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

或者，对于更确切的方法，您可以调用一个javascript函数，通过删除matrix的十进制值来重新计算转换matrix。 请参阅： https ： //stackoverflow.com/a/42256897/1834212

Answer 5

当使用同位素插件（http://isotope.metafizzy.co/index.html）和zoom插件（http://janne.aukia.com/zoomooz/）时，我遇到了这个问题。; 我build立了一个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变换的元素视为纹理而不是vector，以便提供硬件3D加速。

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

同上^