css3 - SVG icons blur/unblur in chrome during any CSS animations -

css3 - SVG icons blur/unblur in chrome during any CSS animations -

see image below. image on left during "resting state", image on right during css3 animation on different element on page (the animation on svg icon though).

the animation simple:

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

any ideas how prepare this? ideally how create icons "always sharp", "always blurry" work well.

this should job:

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

css css3 css-animations