jquery - Webkit + jQuery + SuperBGImage : full-browser images not anti-aliasing

Question

这张图最能说明问题:

我正在自定义一个使用 SuperBGImage 的 WordPress 主题。在 Safari 5.1 和 Chrome 13 中，调整浏览器窗口大小时，图像无法平滑消除锯齿，并且伪影清晰可见。您可以轻松地将 SuperBGImage 演示与生产站点进行比较...

SuperBGImage Demo与 My Project

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

我已经为此工作了一段时间，并尝试了以下方法但没有成功:

1. 尝试向幻灯片图像添加 2px 边框，这解决了与 CSS3 转换几乎不相关的问题。
2. 恢复了缩放算法，我已将其修改为从不裁剪图像。
3. 添加了与演示中使用的完全相同的图像文件。
4. 尝试添加 box-shadow 来触发平滑。
5. 对所有修改后的 JS 和 CSS 进行了比较，试图找到潜在的疏忽。 (image-rendering: optimizationQuality; 和 -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-优化质量

这是正确的解决方案，尽管由于以下原因它可能有效也可能无效:

• 直到最近，插值质量还被视为实现细节(这意味着浏览器可能会产生随机结果，并且根据标准机构的规则有效)。

• 此属性受到艺术家的大力提倡，实际上是因为他们希望能够关闭像素艺术的高质量缩放。经过一年多的争论才让大家达成一致。

• webkit 补丁刚刚于 2011 年 5 月 checkin 以支持此功能，因此您的用户实际使用 Safari 更新需要一段时间。

IE 和 Firefox 在专有的 CSS 属性下已经有了可行的解决方案。

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

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