Webkit + jQuery + SuperBGImage：完全浏览器图像没有抗锯齿 [英] Webkit + jQuery + SuperBGImage: full-browser images not anti-aliasing

问题描述

此图片最能说明问题：

This image best illustrates the problem:

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

I'm customizing a WordPress theme that uses SuperBGImage. In Safari 5.1 and Chrome 13, when resizing the browser window, images aren't anti-aliased smoothly and artifacts are clearly visible. You can readily compare the SuperBGImage demo to the production site...

SuperBGImage演示与我的项目

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

I've added demo images to the WordPress site (personal category) for direct comparison. The image of the cherries is the most obvious.

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

I've been working at this for a while, and have attempted the following to no avail:

1. 尝试为幻灯片图像添加2px边框，这解决了CSS3变换几乎无法解决的问题。


2. 还原缩放算法，我已修改为永不裁剪图像。


3. 添加了演示中使用的完全相同的图像文件。


4. 尝试添加 box-shadow 以触发平滑。


5. 对所有修改过的JS和CSS进行差异，试图找到潜在的疏忽。 （ image-rendering：optimizeQuality; 和 -ms-interpolation-mode：bicubic; 一直保持不变。


6. 确认SuperBGImage与jQuery 1.3.2（演示版）和1.6.2（项目版）一样正常工作。


7. 构建简化演示并确认问题不在于我修改过的SuperBGImage JS。（唯一不同的是裁剪方法。）

1. Tried adding a 2px border to slideshow images, which solved a barely-related problem with CSS3 transforms.
2. Reverted scaling algorithm, which I had modified to never crop images.
3. Added exact same image files used in the demo.
4. Tried adding a box-shadow to trigger smoothing.
5. Diff'd all modified JS and CSS trying to find a potential oversight. (image-rendering: optimizeQuality; and -ms-interpolation-mode: bicubic; have remained consistently intact.
6. Confirmed that the SuperBGImage works as expected with jQuery 1.3.2 (demo) and 1.6.2 (project).
7. Built a simplified demo and confirmed that the problem is not with my modified SuperBGImage JS. (Only difference is cropping method.)

查看SuperBGImage演示时，你会发现在释放调整后的窗口后，通知平滑发生约半秒。虽然过去工作，但我的项目中没有这种微妙的转变。有人知道是什么原因导致这种差异吗？

When viewing the SuperBGImage demo, you'll notice smoothing take place about half a second after you've released the adjusted window. This subtle shift is absent from my project, though it used to be working. Does anyone know what could cause this difference?

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

Unlike most projects, I regrettably don't have this in source control so I can't just step back through revisions to isolate the problem.

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

For those who'd like to fiddle with a simple demo: http://jsfiddle.net/4ZcPF/

推荐答案

答案是使用这个CSS3属性：

The answer is to use this CSS3 property:

-webkit-optimize-quality

这是正确的解决方案，尽管它可能会或可能不会对以下有效原因：

This is the proper solution, although it may or may not be effective for the following reasons:

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

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

This property was strongly advocated by artists, actually because they wanted to be able to turn off high quality scaling for pixel art. It took over a year of debate to get everyone to agree on it.

webkit补丁刚刚在2011年5月签到支持，所以时间因为它实际上是在用户的Safari更新中，你的用户需要花一点时间。

The webkit patch was just checked in to support this in May 2011, so the time for it to be actually in a Safari update that your users have will take a little while.

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

IE and Firefox have had working solutions for a while under proprietary CSS properties.

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

Eventually this property will drop the webkit prefix and become a standard across all browsers.

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

If you want the gory details behind the development, see this thread: http://code.google.com/p/chromium/issues/detail?id=1502

这篇关于Webkit + jQuery + SuperBGImage：完全浏览器图像没有抗锯齿的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！