Webkit + jQuery + SuperBGImage：全浏览器图像不抗锯齿答案

【问题标题】：Webkit + jQuery + SuperBGImage: full-browser images not anti-aliasingWebkit + jQuery + SuperBGImage：全浏览器图像不抗锯齿
【发布时间】：2011-08-19 20:42:42
【问题描述】：

这张图片最能说明问题：

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

SuperBGImage Demo 与 My Project

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

我已经为此工作了一段时间，但尝试了以下方法无济于事：

尝试为幻灯片图像添加 2px 边框，这解决了与 CSS3 转换几乎不相关的问题。
还原的缩放算法，我已经修改为从不裁剪图像。
添加了与演示中使用的完全相同的图像文件。
尝试添加box-shadow 来触发平滑。
对所有修改过的 JS 和 CSS 进行了比较，试图找到潜在的疏忽。（image-rendering: optimizeQuality; 和 -ms-interpolation-mode: bicubic; 始终保持不变。
确认 SuperBGImage 在 jQuery 1.3.2（演示）和 1.6.2（项目）中可以正常工作。
构建了一个简化的demo，确认不是我修改的SuperBGImage JS的问题。（唯一的区别是裁剪方法。）

在查看 SuperBGImage 演示时，您会注意到在释放调整后的窗口大约半秒后进行了平滑处理。我的项目中没有这种微妙的转变，尽管它曾经是有效的。有谁知道是什么导致了这种差异？

与大多数项目不同，很遗憾我在源代码管理中没有此功能，因此我不能只是通过修订来隔离问题。

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

【问题讨论】：

在我的浏览器上（chrome13 for linux），背景图片是抗锯齿的
谢谢，佩德罗。值得注意的是，到目前为止，我只在运行 Lion 的 Mac 上进行了测试。您的背景图片在演示和 WP 示例中都进行了抗锯齿处理？
是的 i.imgur.com/lMGUr.jpg 小提琴演示看起来也很棒
情节变厚了。谢谢你，先生。
在 windows 2008 上，在调整大小时，两个网站之间的 FF 或 Chrome 没有任何明显差异。

标签： jquery safari webkit antialiasing image-scaling

【解决方案1】：

答案是使用这个 CSS3 属性：

-webkit-optimize-quality

这是正确的解决方案，尽管它可能有效也可能无效，原因如下：

直到最近，插值质量才被视为实现细节（这意味着浏览器可能会产生随机结果，并且符合标准机构的规则）。
这个属性被艺术家们大力提倡，实际上是因为他们希望能够关闭像素艺术的高质量缩放。花了一年多的时间让每个人都同意。
webkit 补丁刚刚在 2011 年 5 月签入以支持此功能，因此实际在用户拥有的 Safari 更新中需要一段时间。

IE 和 Firefox 在专有 CSS 属性下已经有一段时间了。

最终这个属性会去掉 webkit 前缀，成为所有浏览器的标准。

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

【讨论】：

感谢您的回答，尽管我仍然不确定它与两个示例之间的差异有何关系。也许处于边缘只会引发模糊的渲染问题。在哪里可以找到这样的属性记录，因为它显然不是任何标准的一部分？谷歌搜索它让我回到了这个页面:(
@Matt，现在它只记录在浏览器引擎开发者论坛中，阅读标准文档并不有趣，随着时间的推移会有更多内容。很多人没有注意到这些“小”质量问题，但看起来我们中的一些人希望能够始终如一地正确地做到这一点。