jquery - 缩放解决方法？缩放问题

Question

https://jsfiddle.net/gubLwvkt/

#icon-wrap:hover {
    animation: animation 1000ms linear both;
}

在动画之后，图片(甚至之前用 .svg 尝试过)的分辨率较低

有办法解决吗？我喜欢这些特定关键帧的一点是，div 不会弄乱它附近的对象

我发现的唯一解决方法是放弃关键帧并使用尺寸变化的过渡(但这会导致其他问题)

@编辑我必须在 Firefox 中添加它就好了。在 Opera 中，它会在几秒钟内处于低质量状态，然后进行调整。Internet Explorer 就好了。

Answer 1

Chrome 似乎在渲染图像时查看背面，因为您必须使用 3D 转换，您可以通过将背面可见性设置为隐藏来解决此问题:

#icon-wrap img {
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
}

https://jsfiddle.net/gubLwvkt/1/