WebKit：带有 css scale + translate3d 的模糊文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8024061/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
WebKit: Blurry text with css scale + translate3d
提问by phil
I'm seeing an issue where Chrome and other WebKit browsers massively blur any css-scaled content that also has translate3d applied.
我看到一个问题，Chrome 和其他 WebKit 浏览器会大量模糊任何也应用了 translate3d 的 css 缩放内容。
Here's a JS Fiddle: http://jsfiddle.net/5f6Wg/. (View in Chrome.)
这是一个 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>Are there any known workarounds for this? I get that in the simple example above, I could simply use translate rather than translate3d - the point here is to strip the code down to the bare essentials.
是否有任何已知的解决方法？我在上面的简单示例中得到了这一点，我可以简单地使用 translate 而不是 translate3d - 这里的重点是将代码剥离为基本要素。
采纳答案by methodofaction
Webkit treats 3d transformed elements as textures instead of vectors in order to provide hardware 3d acceleration. The only solution to this would be to increase the size of the text and downscaling the element, in essence creating a higher res texture.
Webkit 将 3d 转换元素视为纹理而不是矢量，以提供硬件 3d 加速。唯一的解决方案是增加文本的大小并缩小元素的大小，实质上是创建更高分辨率的纹理。
See here: http://jsfiddle.net/SfKKv/
见这里：http: //jsfiddle.net/SfKKv/
Note that antialiasing is still underpar (stems are lost) so I'm beefing up the text with a bit of text shadow.
请注意，抗锯齿仍然不足（词干丢失），所以我用一些文本阴影来加强文本。
回答by hallodom
I found that using:
我发现使用：
-webkit-perspective: 1000;
on the container of your font or icon set kept things crisp for me after experiment with the issue on Android nexus 4.2 for sometime.
在对 Android nexus 4.2 上的问题进行了一段时间的实验后，在您的字体或图标集的容器上让我保持清晰。
回答by maoosi
A css filter effect is a graphical operation that allows to manipulate the appearance of any HTML element. Since Chromium 19 these filters are GPU accelerates to make them super fast.
css 过滤器效果是一种图形操作，允许操纵任何 HTML 元素的外观。从 Chromium 19 开始，这些过滤器是 GPU 加速的，使它们超快。
CSS3 introduces a bunch of standard filter effects, one of them is the blur fitler:
CSS3 引入了一系列标准滤镜效果，其中之一是模糊过滤器：
-webkit-filter: blur(radius);
The ‘radius' parameter affects how many pixels on the screen blend into each other, so a larger value will create more blur. Zero of course leaves the image unchanged.
'radius' 参数影响屏幕上有多少像素相互融合，因此较大的值会产生更多的模糊。零当然会使图像保持不变。
Set the radius to 0 will force browser to use GPU calculation and force it to keep your html element unchanged. It's like applying an "hard edges" effects.
将半径设置为 0 将强制浏览器使用 GPU 计算并强制它保持您的 html 元素不变。这就像应用“硬边”效果。
So the best solution for me in order to fix this blurry effect was to add this simple line of code:
因此，对我来说，修复这种模糊效果的最佳解决方案是添加以下简单的代码行：
-webkit-filter: blur(0);
There is also a known bug that only affects retina screens. (See here: Why doesn't blur(0) remove all text blur in Webkit/Chrome on retina screens?). So in order to make it works also for retina, I recommend to add this second line:
还有一个已知的错误只影响视网膜屏幕。（请参阅此处：为什么不模糊（0）删除视网膜屏幕上 Webkit/Chrome 中的所有文本模糊？）。所以为了使它也适用于视网膜，我建议添加第二行：
-webkit-transform: translateZ(0);
回答by Miguel
Try this
尝试这个
...{
zoom:2;
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
Or for a more exact approach you can call a javascript function to recalculate the transformation matrix by removing the decimal values of the matrix. see: https://stackoverflow.com/a/42256897/1834212
或者对于更精确的方法，您可以调用 javascript 函数通过删除矩阵的十进制值来重新计算转换矩阵。见：https: //stackoverflow.com/a/42256897/1834212
回答by chuckles
I came across this issue when using the isotope plugin (http://isotope.metafizzy.co/index.html) in combination with the zoom plugin (http://janne.aukia.com/zoomooz/). I built a jquery plugin to handle my case. I threw it up in a github repo in case anybody could benefit from it. - https://github.com/charleshimmer/jquery-hirestext.
我在使用同位素插件 (http://isotope.metafizzy.co/index.html) 和缩放插件 (http://janne.aukia.com/zoomooz/) 时遇到了这个问题。我构建了一个 jquery 插件来处理我的案例。我把它放到了 github 仓库中，以防任何人都可以从中受益。- https://github.com/charleshimmer/jquery-hirestext。
回答by Mixtelf
I used javascript to move the text 1px top and then with 100ms after, back 1px down. It's almost unperceptive and solved the problem completely cross-browser.
我使用 javascript 将文本向上移动 1px，然后在 100ms 之后，向下移动 1px。它几乎是无知的，完全跨浏览器解决了这个问题。
回答by placeboaddict
body {
-webkit-font-smoothing: subpixel-antialiased;
}
or I think you could put that on a specific element, but I was having problems with one element affecting the whole site.
或者我认为你可以把它放在一个特定的元素上，但我遇到了影响整个网站的一个元素的问题。
I think it is a problem with custom font-face fonts.
我认为这是自定义字体的问题。
回答by Tom
Webkit treats 3d transformed elements as textures instead of vectors in order to provide hardware 3d acceleration.
Webkit 将 3d 转换元素视为纹理而不是矢量，以提供硬件 3d 加速。
This has nothing to do with it. You'll notice that your aliasing problem can be fixed with the addition of duration and direction information (e.g. 0.3 linear). Your having a mare trying to render everything at runtime:
这与它无关。您会注意到您的混叠问题可以通过添加持续时间和方向信息（例如 0.3 线性）来解决。您有一匹母马试图在运行时渲染所有内容：
Same for the above ^
同上^
