Javascript 有没有办法强迫chrome进行亚像素渲染以实现缓慢的转换？

我正在做一个非常缓慢的背景图像转换（一个缓慢向左滑动的空间视图）。我的问题是，虽然它在Firefox上看起来很漂亮，但在Chrome上却很糟糕。由于Chrome缺乏亚像素渲染，我得到了一种“抖动”效果，图像只是捕捉到下一个像素。我无法加快图像的速度，因为它会破坏我试图达到的效果。我尝试过使用

TranslateZ（）

技巧，我尝试过我能想到的所有CSS3效果，让它看起来更好，我尝试过Kinetic.js，我甚至尝试过Babylon.js，希望WebGL能解决我的问题

在这一点上，我不知所措，我可能不得不给Chrome用户一个静态的背景，更多地迎合Firefox用户关于我可以为UI UX做的整洁的小事情，然后在我的网站上放一个免责声明，说最好在FF中查看页面

---

我真的不想这样做。有什么解决办法吗？

您可以通过应用一个小变换来强制进行亚像素渲染：

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

---

但是，与其使用JS来制作动画，为什么不使用CSS3动画呢？ 如果使用

transform:translate（）

浏览器将默认使用亚像素渲染

此外，由于性能更好，您不应该感到紧张/波动

有关性能的更多信息，请点击此处：

我在这里制作了一个简单的演示：

---

（为了简单起见，我只使用了-webkit-vendor前缀）

请提供一个工作演示或一个JSFIDLE。有趣的是，当我在工作场所使用Chrome Portable时，浏览器呈现亚像素效果很好，但在家里的游戏机上使用最新版本的Chrome，它不会渲染亚像素。它看起来很好@JSArrakis。。可能是图形卡的问题。在我的firefox版本上看起来很紧张。（CSS转换可能会有更好的结果）您可以使用画布上的WebGL强制执行抗锯齿，尽管跨浏览器/硬件的支持和一致性会有点不确定。有趣的是，这在3D上下文中执行亚像素抗锯齿，而不是在2D上下文中（即，在元素在3D空间中变换之前，不在元素的2D光栅化中）。似乎有一种单独的混叠算法，它首先在绘制元素时发生，然后将纹理发送到3D上下文中，在3D上下文中该纹理发生抗混叠。请参见示例。引入亚像素混叠的唯一方法（不是亚像素消除混叠）是通过放大（尝试放大示例，然后您将看到大小差异）。