最新的Webkit（包括Safari 5.1）中图片缩放效果更差？

Question

我一直在开发一个需要用CSS/JavaScript对大型图像进行缩放的项目。在Safari 5.1发布之前，我注意到在Safari中图像非常平滑，但在Chrome中则有点锯齿状。现在，Safari 5.1似乎和Chrome一样糟糕。

image-rendering CSS属性似乎没有任何区别。大多数在线文章都是关于希望使用最近邻平滑法而不是双三次插值的人，而我需要相反的效果：让我的图片更加平滑。

我附上了两张图片。一张显示了Safari中的缩放效果，另一张则是Firefox。如果你看左边模特的手臂，尤其是那里的差异就可以看出来。

- Bart S.

---

如果您发布图片链接或src，其他人很可能会愉快地为您将其编辑到问题中。 - David Thomas

谢谢，我刚刚在自己的账户上发布了它们（获得了正确的权限）。 - Bart S.

我无法在Mac - Safari 5.1（6534.50）中重现此行为。 - Joonas

我在当前项目中遇到了一个问题，具体情况请参考此链接：https://dev59.com/3VrUa4cB1Zd3GeqPj3LA。奇怪的是，我使用的jQuery插件的网站（http://demo.andreaseberhard.de/superbgimage/demo.html）没有这个问题，而我的网站却有，并且使用的标记、JS和样式几乎完全相同。两者都在Safari 5.1上运行。 - Matt Stein

不确定您的比较意图有多准确，因为两个图像具有不同的大小比例。如果在webkit中输出是这种情况，我会检查您用于调整大小的方法。如果css、jquery插件或jquery库使用百分比，我会避免使用该路线。我发现Chrome有时会以不同的方式处理小数。在我看来，对于现代浏览器，保留比例的清晰重新调整大小实际上不应该依赖于jquery。如果可能，您能否向我们展示一些css代码？ - frontsideup

通常在Safari中，只有在调整浏览器窗口大小时图像才会看起来模糊。您可以尝试创建一个仅包含调整大小的图像且没有JavaScript的页面，以查看是否存在某些问题。另外，只需将大型图像打开到单独的窗口中并保持缩放状态。当您调整窗口大小时，渲染是否在平滑和模糊之间切换？如果没有，请尝试重新安装最新的OS X组合更新。顺便说一下，我相信最近版本的Chrome默认使用Bicubic过滤，感谢上帝。 - Chad von Nau

Answer 1

我猜测使用CSS3的transform可能会产生更好的效果，因为它使用硬件加速。所以我创建了一个fiddle，用css的width和height以及CSS3的transform对一些图像进行缩放(点击这里查看)来检查并确保，但是我没有很好的眼力或者也许是显示器，我没有看到css缩放或-webkit-transform：scale（）缩放版本之间的任何区别。请看一下fiddle，让我知道您是否看到任何差异。

Fiddle: http://jsfiddle.net/EWf25/1/embedded/result/

- Mohsen

---

CSS变换通常看起来更流畅，因为它们具有硬件加速的优势，但不幸的是，它们并不适用于布局目的。图像在视觉上被调整大小，但并未在文档流中进行调整。 - Chad von Nau

Answer 2

尝试使用以下图像渲染值：

optimizeQuality
optimize-contrast
-web-kit-optimize-contrast

- Rodrigo

---

你是指 -webkit-optimize-contrast 吗？ - maackle