在任何CSS动画期间，SVG图标在chrome中模糊/ unblur

Question

见下图。左边的图像处于“静止状态”，右边的图像是在页面上不同元素上的CSS3动画期间（动画也在SVG图标上）。

动画很简单：

element {
    -webkit-transform  : scale( .8 );
    -webkit-transition : all .2s;
}

element:hover {
    -webkit-transform  : scale( 1 );
}

任何想法如何解决这个问题？理想情况下，如何使图标“始终清晰”，但“总是模糊”也可以。

Answer 1

这应该做的工作：

element {
    -webkit-transform  : scale(.8) translatez(0);
    -webkit-transition : all .2s;
}

element:hover {
    -webkit-transform  : scale(1) translatez(0);
}