我看到一个问题,Chrome 和其他 WebKit 浏览器会大量模糊任何也应用了 translate3d 的 css 缩放内容。
这是一个 JS Fiddle: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 - 这里的重点是将代码剥离到最基本的部分。