相关疑难解决方法(0)

WebKit:带有css scale + 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;
}
Run Code Online (Sandbox Code Playgroud)
<div class="test">
  <div class="testInner">
    This is blurry in Chrome/WebKit when translate3d and scale or scale3d are applied.
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

有没有任何已知的解决方法?我在上面的简单示例中得到了这个,我可以简单地使用translate而不是translate3d - 这里的重点是将代码剥离到最基本的要素.

webkit blurry scale css3 translate3d

56
推荐指数
4
解决办法
9万
查看次数

标签 统计

blurry ×1

css3 ×1

scale ×1

translate3d ×1

webkit ×1