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

Question

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

基本上，在休眠状态下，例如首次加载页面时，或者用户在选项卡之间滑动时，图像（反式 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）作为图标。