Почему блюрится svg иконка в chrome?

Question

[lavezzi1]

Вот иконка, нужно абсолютно позиционировать по центру. Плохо выглядит в хроме, а если добавить translateZ(0) - сильно блюрится. Причем в FF выглядит четко. Что сделать?

codepen.io/anon/pen/ZWLLWv?editors=1100

Answer 1

[Максим Гатилин]

Дело в том, что ваша иконка имеет размеры 25 на 25 пикселей. Вы смещаете элемент на 50%. Что происходит в данном случае? Правильно, браузер смещает иконку на 12 с половиной пикселя. Разные браузеры по разному отрисовывают пол-пикселя, поэтому иконка в хроме например размыта. Вот работающий пример на отрицательных маргинах и четным размером иконки.

Все гораздо упростится, если вы будете использовать иконочные шрифты или svg-спрайты.