Webkit + jQuery + SuperBGImage：完全浏览器图像没有抗锯齿

Question

此图片最能说明问题所在：

我正在自定义使用SuperBGImage的WordPress主题。在Safari 5.1和Chrome 13中，当调整浏览器窗口大小时，图像不会平滑地消除锯齿，并且可以清楚地看到工件。您可以轻松地将SuperBGImage演示与生产站点进行比较......

SuperBGImage Demo与My Project

我已将演示图像添加到WordPress网站（个人类别）以进行直接比较。樱桃的形象是最明显的。

我已经在这方面工作了一段时间，并尝试以下无济于事：

1. 尝试为幻灯片显示图片添加2px边框，这解决了与CSS3转换几乎无关的问题。
2. 还原缩放算法，我已将其修改为永不裁剪图像。
3. 添加了演示中使用的完全相同的图像文件。
4. 尝试添加box-shadow以触发平滑。
5. Diff'd所有修改过的JS和CSS试图找到潜在的疏忽。 （image-rendering: optimizeQuality;和-ms-interpolation-mode: bicubic;一直保持不变。
6. 确认SuperBGImage在jQuery 1.3.2（演示版）和1.6.2（项目版）中按预期工作。
7. 构建了一个简化的演示并确认问题不在于我修改过的SuperBGImage JS。 （唯一不同的是裁剪方法。）

在观看SuperBGImage演示时，您会发现在释放调整后的窗口后大约半秒钟会发生平滑。我的项目中没有这种微妙的转变，尽管它曾经有效。有谁知道什么可能导致这种差异？

与大多数项目不同，我遗憾的是在源代码管理中没有这个，所以我不能只是通过修订来解决问题。

对于那些想要简单演示的人：http://jsfiddle.net/4ZcPF/

Answer 1

答案是使用这个CSS3属性：

<强> -webkit-优化品质

这是正确的解决方案，但由于以下原因可能会或可能不会有效：

• 插值质量直到最近才被视为实施细节（意味着浏览器可能具有随机结果并且符合标准组织的规则）。

• 艺术家强烈主张这个属性，实际上是因为他们希望能够关闭像素艺术的高质量缩放。经过一年多的辩论才得到大家的同意。

• 我们已于2011年5月签入了webkit补丁以支持此功能，因此您在用户实际拥有Safari更新时需要花费一些时间。

IE和Firefox在专有的CSS属性下已经有了一段时间的工作解决方案。

最终，此属性将删除webkit前缀，并成为所有浏览器的标准。

如果您想了解开发背后的血腥细节，请参阅此主题： http://code.google.com/p/chromium/issues/detail?id=1502