WebKit：模糊文本与css缩放+ translate3d [英] WebKit: Blurry text with css scale + translate3d

问题描述

我看到一个问题，Chrome和其他WebKit浏览器会大幅模糊已应用了translate3d的任何CSS缩放内容。

I'm seeing an issue where Chrome and other WebKit browsers massively blur any css-scaled content that also has translate3d applied.

这是一个JS小提琴： http://jsfiddle.net/5f6Wg/ 。 （在Chrome中查看。）

Here's a JS Fiddle: http://jsfiddle.net/5f6Wg/. (View in 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 - 这里的要点是将代码剥离到基本的要素。

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.

推荐答案

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

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.

请参阅：
< a href =http://jsfiddle.net/SfKKv/ =noreferrer> 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.

这篇关于WebKit：模糊文本与css缩放+ translate3d的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！