在Webkit浏览器中，经过jQuery动画处理的可缩放透明PNG图片失去了抗锯齿效果。

Question

在Webkit浏览器中，经过jQuery动画处理的可缩放透明PNG图片失去了抗锯齿效果。

3

我有一个脚本，可以在地图上布置这些圆形图标，当你将鼠标悬停在它们上面时，它们会弹起，文本出现等等。这些图标的比例是相对于它们在地图上的位置而定的，即相对于y轴上的0点的距离。我已经尝试通过CSS的宽度和高度属性以及在img标签上设置html的宽度和高度来设置比例，但仍然存在同样的问题：

基本上，当它们处于休眠状态时（例如页面首次加载或用户在选项卡之间切换时），这些图像（透明的PNG）是抗锯齿的。然而，当hover()函数和animate()函数被调用时，图像突然变得锯齿状和恶劣。我注意到这种行为在Firefox中不存在，但在Safari和Chrome中存在。我不知道这是否与Webkit、jQuery或仅仅是JavaScript本身有关，但也许有人能够提供一些帮助，因为Google的结果没有任何发现。有什么想法吗？:)

请注意，在附加的截图中，左下角和右下角的图标看起来都很好 - 它们是未缩放的图标！

谢谢 :) Matt

- Matt Fletcher

所以，我发现问题出在阴影PNG上。当不透明度被动画化时，一切正常，但动画化宽度或高度会导致图标出现别名。我在firebug中运行了$('.shadow').animate({'width': '50%'})进行测试，结果是相同的。难以理解... - Matt Fletcher

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kaii · Answer 1

我只能猜测，但我的假设是Gecko和WebKit使用不同的图像缩放算法。因此这与JavaScript、jQuery或PNG没有任何关系。

事实上，即使在WebKit截图中，该图像仍然具有抗锯齿边缘。（当你放大时可以看到）

边框只是混乱了，这通常是错误的缩放算法的结果。

尝试以下操作以确认此假设：

<img src="youricon.png" width="90%" height="90%">

并在两个浏览器中比较结果。您应该看到相同的问题。

可能的解决方案：

制作图像的较小版本，并在悬停时用较小的图像替换图像，而不是缩放它。
使用可缩放矢量图形格式（如SVG）来制作您的图标。