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-供应商前缀）

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

1 个答案: