在WebKit浏览器中，图像调整会产生轻微的、短暂的像素化

image resize gives slight, brief, pixelation in WebKit browsers

本文关键字：轻微 像素 浏览器 WebKit 图像 调整      更新时间：2023-09-26

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

使用jQuery，我有一个图像调整成较小的一个。新维度正好是旧维度的一半。然而，在调整大小后，图像出现轻微像素化，然后大约2秒后看起来更好。

如何解决这个问题?

EDIT:仍然没有进展。

解决方案是在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请注意，当您调整浏览器的大小时，徽标是如何暂时像素化的。

我的!享受吧!

我发现只有当完成后的大小是本机图像大小时，才会执行。

从150到300像素，无像素化…

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

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

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

因此，解决方法或解决方法是尽可能确保最终大小为本机图像大小。

您可以使用适合您想要的尺寸的图像。如果你不能这样做，那么你可以使用一个回调方法用一个与新维度大小相同的图像替换调整后的图像。你所做的与拉伸图像没有什么不同(事实上这正是你所做的)，所以会有像素化。

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

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

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

image-rendering: optimizeQuality;

我遇到了完全相同的问题。我把动画大小的*.jpg改成了*.svg，像素化就消失了

相关文章：