Why is svg icon blinking in chrome?

Question

css

Here is the icon, you need to absolutely position it in the center. It looks bad in chrome, and if you add translateZ (0) - it blurs a lot. And in FF it looks clear. What to do?
codepen.io/anon/pen/ZWLLWv?editors=1100

Answer 1

The thing is, your icon is 25 by 25 pixels. You offset the element by 50%. What happens in this case? That's right, the browser offsets the icon by 12 and a half pixels. Different browsers render half a pixel differently, so the icon in chrome is blurry, for example. Here is a working example with negative margins and an even icon size.
Everything will be much easier if you use icon fonts or svg sprites .