lavezzi1
@lavezzi1

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

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

codepen.io/anon/pen/ZWLLWv?editors=1100
  • Вопрос задан
  • 693 просмотра
Пригласить эксперта
Ответы на вопрос 1
gatilin222
@gatilin222
Frontend-разработчик
Дело в том, что ваша иконка имеет размеры 25 на 25 пикселей. Вы смещаете элемент на 50%. Что происходит в данном случае? Правильно, браузер смещает иконку на 12 с половиной пикселя. Разные браузеры по разному отрисовывают пол-пикселя, поэтому иконка в хроме например размыта. Вот работающий пример на отрицательных маргинах и четным размером иконки.

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы