jsfiddle：http: //jsfiddle.net/UenFN/。注意动画后轻微的、短暂的像素化。此错误仅发生在 WebKit 浏览器中。
使用 jQuery，我将图像调整为更小的图像。新尺寸正好是旧尺寸的一半。然而，在调整大小后，图像会出现轻微的像素化，然后大约 2 秒后看起来会更好。
我该如何解决这个问题？
编辑：仍然没有进展。任何想法都值得赞赏。
问问题
5187 次
6 回答
19
解决方案是在 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 请注意，当您调整浏览器大小时，徽标是如何暂时像素化的。
我的！请享用！
于 2013-01-10T14:39:05.313 回答
1
我发现它唯一不这样做的时候是完成后的大小是本机图像大小。
从 150 到 300 像素，无像素化...
从 450 到 300 像素，仍然没有像素化...
因此，修复或解决方法是尽可能确保您的最终尺寸是本机图像尺寸。
于 2011-10-28T03:23:25.047 回答
0
您可以使用适合您要使用的尺寸的图像。如果你不能这样做，那么你可以使用回调方法将调整大小的图像替换为新尺寸大小的图像。您所做的与拉伸图像没有什么不同（实际上这正是您正在做的），因此会有像素化。
于 2011-10-26T20:12:26.093 回答
0
为了解决这个问题，我第二次插入了相同的图像，但使用了我想要使用的尺寸。在动画后的毫秒，我将主图像替换为之前隐藏的图像。
jsfiddle：http: //jsfiddle.net/wLwrc/1/
于 2011-10-29T02:13:51.633 回答
0
2013 年解决。https://bugs.webkit.org/show_bug.cgi?id=74600
image-rendering: optimizeQuality;
于 2015-08-10T12:23:04.927 回答
0
我有同样的问题。我将动画大小的 *.jpg 更改为 *.svg，像素化消失了。
于 2016-04-20T18:45:27.527 回答