当页面以任何方式移动时 - 窗口大小调整、滚动、悬停、用作图标的图像会重新渲染并使侧面褶皱，在具有透明背景和圆形边框(如示例)的图像上非常清楚，是有什么办法可以解决这个问题？示例
<body>
<style>
body{
background: black;
}
img{
max-width: 5vw;
transition: 1s ease;
}
img:hover{
max-width: 6vw;
}
</style>
<img src="http://www.iconsdb.com/icons/preview/white/whatsapp-xxl.png">
</body>
在这种情况下，当鼠标悬停时，图像会出现锐利的边界，有些人可能会说是像素化的，几毫秒后它会变回平滑的边界， 这是给你的 fiddle - http://jsfiddle.net/o3qk5uaL/
最佳答案
好问题!
这不是问题，它是网络浏览器如何呈现图片以及过渡如何运行 - 您通过将图片绑定(bind)到动态窗口大小比例来重新绘制图片 - 正在重新计算图片大小，浏览器将在你停止之前不要完全绘制(paint)。 原始图片有其分辨率，当更改图片需要以新分辨率渲染时，原始分辨率看起来最好，这取决于浏览器和 GPU。
我发现了一个可能对您有帮助的小解决方法 - 尝试对那些动态分辨率不断变化的图标使用 SVG 格式。 SVG 没有任何分辨率，它是一种基于 XML 的矢量图像格式，它们非常适合交互和动画。
看看这个比较演示:CodePen
代码:因为我们必须...
<img src="http://www.iconsdb.com/icons/preview/white/whatsapp-xxl.png" />
<br /><br />
<img src="http://8tracks.com/assets/brand/8_icon_white.svg" />
关于javascript - 与页面交互时图像质量下降一秒，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26488179/