我发现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 - 这里的重点是将代码剥离到最基本的要素.