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

【问题标题】：Is there a way I can force chrome to do subpixel rendering for a slow translation?有没有办法可以强制 chrome 进行亚像素渲染以实现慢速翻译？
【发布时间】：2014-04-01 14:27:54
【问题描述】：

我正在对背景图像进行非常缓慢的转换（一个缓慢向左滑动的空间视图）。我的问题是虽然它在 Firefox 上看起来很漂亮，但在 Chrome 上看起来很糟糕。由于 Chrome 缺乏亚像素渲染，我得到了“抖动”效果，并且图像只是捕捉到下一个像素。我无法加快图像速度，因为它会破坏我试图达到的效果。我尝试过使用TranslateZ() 技巧，我尝试了所有我能想到的 CSS3 效果来让它看起来更好，我尝试过 Kinetic.js，我什至尝试过 Babylon.js，希望 WebGL 能解决我的问题。

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

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

【问题讨论】：

请提供工作演示或 jsfiddle
jsfiddle.net/yrwA9 有趣的是，当我在工作场所使用 Chrome Portable 时，浏览器渲染亚像素很好，但是在我的游戏计算机上使用最新版本的 chrome，它不渲染子像素。
似乎没问题@JSArrakis .. 可能是显卡问题。
在我的 Firefox 版本上看起来很紧张。（CSS 转换可能有更好的结果）
您可以在画布上使用 WebGL 来强制抗锯齿，尽管跨浏览器/硬件的支持和一致性会有点不确定。

标签： javascript css google-chrome

【解决方案1】：

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

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

但是不使用 JS 来制作动画，为什么不使用 CSS3 动画呢？如果你使用transform: translate()，浏览器默认会使用亚像素渲染。

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

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

【讨论】：

有趣的是：这会在 3D 上下文中进行亚像素抗锯齿，而不是在 2D 上下文中（即不在元素在 3D 空间中转换之前的 2D 光栅化中）。似乎有一个单独的锯齿算法首先发生，当元素被绘制时，然后该纹理被发送到该纹理的抗锯齿发生的 3D 上下文。有关示例，请参阅stackoverflow.com/questions/39963699。引入亚像素锯齿（不是亚像素抗锯齿）的唯一方法是放大（尝试放大示例，然后您会看到尺寸差异）。