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

此图像最能说明问题： 截图比较

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

SuperBGImage演示与我的项目

我已经将演示图像添加到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/

答案是使用这个CSS3属性：

-webkit-优化品质

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

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

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

  • 我们在2011年5月刚刚签入了webkit补丁以支持此function，因此实际上在用户拥有的Safari更新中的时间将需要一段时间。

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

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

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

Interesting Posts