javascript - 在 Webkit 浏览器中使用 jQuery 动画后，缩放的透明 PNG 会失去抗锯齿功能

Question

我有一个脚本，可以在 map 上布置这些圆形图标，将鼠标悬停在它们上方，它们会弹出，出现文本等。图标相对于它们在 map 上的位置进行缩放，即与 0 的距离y 轴。我尝试通过CSS的宽度和高度属性以及img标签上的html宽度和高度来设置比例，但仍然遇到同样的问题:

基本上，在休眠状态下，例如当页面首次加载时，或者用户在选项卡之间滑动时，图像(反式 PNG)是抗锯齿的。然而，当调用hover()函数以及animate()函数时，图像突然变得锯齿状且可怕。我注意到这种行为在 Firefox 中不存在，但在 Safari 和 Chrome 中存在。我不知道这是否与 Webkit、jQuery 或者只是 javascript 本身有关，但也许有人可以透露一些信息，因为 google 没有结果。有什么想法吗？ :)

另请注意，左下角和右下角的图标在所附的两个屏幕截图中看起来都很好 - 它们是未缩放的!

非常感谢:)马特

Answer 1

我只能猜测这一点，但我的假设是 gecko 和 webkit 对图像使用不同的缩放算法。因此它与 javascript、jquery 或 png 完全无关。

事实上，即使在 webkit 屏幕截图中，图像仍然具有抗锯齿边缘。 (放大时您会看到)

边框被搞乱了，这通常是由于糟糕的缩放算法造成的。

尝试以下方法来确认这个假设:

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

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

可能的解决方案:

• 制作较小版本的图像，并在悬停时将图像替换为较小版本，而不是缩放图像。
• 为您的图标使用可缩放矢量图形格式(例如 SVG)。