有没有办法可以强制chrome进行子像素渲染以实现慢速翻译？

Question

我做了一个非常缓慢的背景图像过渡(一个向左缓慢滑动的空间视图).我的问题是它在Firefox上看起来很漂亮,但在Chrome上看起来很糟糕.由于Chrome缺少亚像素渲染,我得到了"抖动"的效果,图像只是捕捉到下一个像素.我无法加速图像,因为它会破坏我想要实现的效果.我尝试过使用TranslateZ()技巧,我已经尝试了每一个我能想到的CSS3效果让它看起来更好,我尝试过Kinetic.js,我甚至尝试过Babylon.js希望WebGL能解决我的问题.

在这一点上,我不知所措,我可能只需要为Chrome用户提供一个静态背景,并为Firefox用户提供更多关于我可以为UI UX做的简洁小事,然后在我的网站上放置免责声明说该页面最好在FF中查看.

我真的不想这样做.有什么工作吗？

Answer 1

您可以通过应用小变换来强制子像素渲染:

#container {
    transform: rotate(-0.0000000001deg);
    -webkit-transform: rotate(-0.0000000001deg);
}

但是,为什么不使用CSS3动画,而不是使用JS来使动画工作？如果使用transform: translate()浏览器,默认情况下将使用子像素渲染.

此外,由于性能更好,你不应该让你的紧张/波动.

有关性能的更多信息,请访问:http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

我在这里整理了一个简单的演示:http://jsfiddle.net/yrwA9/6/ (为了简单起见,我只使用了-webkit-供应商前缀)