图像调整大小在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

为了解决这个问题，我再次插入了相同的图像，但使用了我想要使用的尺寸。在动画播放后的几毫秒，我将主图像替换为之前隐藏的图像。

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