图像调整大小在WebKit浏览器中提供轻微，简短的像素化

Question

jsfiddle：http://jsfiddle.net/UenFN/。请注意动画后的轻微，短暂的像素化。此错误仅发生在WebKit浏览器中。

使用jQuery，我将图像调整为较小的图像。新尺寸恰好是旧尺寸的一半。然而，在调整大小之后，图像看起来略微像素化，然后大约2秒后看起来更好。

如何解决此问题？

编辑：仍然没有进展。任何想法都表示赞赏。

Answer 1

解决方案是在Webkit中启用硬件加速。

img {
    -webkit-transform: translate3d(0, 0, 0);
}

我有一个小型库，可以调整图像和HTML以适应父div。在做双三次传导之前，Safari以自己独特的方式对我进行了快速而肮脏的传递。强制硬件加速解决了这个问题，在我的情况下，由于我做了很多调整大小，我注意到性能有所下降，但最终大修结果更具吸引力。

您可以在此处测试此修复程序：http://www.visualfox.me/app/nanjing-2014 在Safari下，用作蒙版的图像永远不会像素化，无论调整大小，高档还是缩小（只需调整浏览器大小以进行测试）。您可以将其与不使用此修复程序的其他演示进行比较：http://www.visualfox.me/app/bold 请注意当您调整浏览器大小时，徽标在时间上是如何像素化的。

我的！享受！

Answer 2

我发现它唯一一次不这样做是指完成时的尺寸是原始图像尺寸。

从150到300像素，没有像素化......

http://jsfiddle.net/UenFN/1/

从450到300像素，仍然没有像素化......

http://jsfiddle.net/UenFN/2/

因此，修复或解决方法是尽可能确保您的最终尺寸是原始图像尺寸。

Answer 3

您可以使用适合您要使用的尺寸的图像。 如果您不能这样做，那么您可以使用回调方法将调整大小的图像替换为新尺寸的图像。你正在做的事情与拉伸图像没什么不同（实际上这正是你正在做的事情）所以会有像素化。

Answer 4

为了解决这个问题，我第二次插入了相同的图像，但是我想要使用的尺寸。在动画后的毫秒处，我将主图像替换为先前隐藏的图像。

jsfiddle：http://jsfiddle.net/wLwrc/1/

Answer 5

于2013年解决。https://bugs.webkit.org/show_bug.cgi?id=74600

image-rendering: optimizeQuality;

Answer 6

我遇到了完全相同的问题。我将* .jpg的大小调整为* .svg并且像素化消失了。