Javascript 在Webkit浏览器中，缩放的透明PNG在jQuery动画之后会丢失抗锯齿

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

基本上，在休眠状态下，例如当页面第一次加载时，或者用户在选项卡之间切换时，图像（trans'png）会消除锯齿。但是，当调用hover（）函数以及animate（）函数时，图像会突然变得参差不齐和可怕。我注意到这种行为在firefox中不存在，但在safari和chrome中存在。我不知道这是和Webkit、jQuery还是javascript本身有关，但也许有人会对谷歌一无所获有所启发。有什么想法吗？：）

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

非常感谢：）

---

Matt

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

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

边界被弄乱了，这通常是一个糟糕的缩放算法的结果

尝试以下方法来确认此假设：

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

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

可能的解决办法：

• 制作图像的较小版本，并用悬停时的较小版本替换图像，而不是缩放图像
• 对图标使用可缩放的矢量图形格式，如SVG

---

谢谢你的回答，凯伊。屏幕截图上出现的抗锯齿实际上只是屏幕截图本身被缩小的结果。通常情况下，情况更糟！我不觉得这只是缩放算法（我知道在其他情况下也可以）的原因是这两个屏幕截图都来自chrome；第二个是在动画被调用后出现的。不小心按了回车键。。。你可以在这里现场观看：（请忽略“有趣”的文字！我很无聊…）也请忽略神奇地出现和消失的阴影，工作正在进行中…我很高兴我没有忽略文字。这很有趣，让我在紧张的一天后笑了；-）顺便说一句，我的chromium构建可以很好地呈现页面。版本字符串是15.0.874.106（Developer build 107270 Linux），因此，我发现问题在于阴影PNG。当不透明度设置动画时，这很好，但是设置宽度或高度的动画会导致图标别名。我在firebug中运行$（'.shadow'）.animate（{'width'：'50%}）进行测试，结果是一样的。头架起重机。。。