@ermax_inc

[SVG] Почему в IE svg в фоновом изображение нечеткое?

6208b52a4e784eee9b8a973396d1b235.png
Вся суть в картинке.
Если вставляем SVG через background-image оно становится размытым, нечетким.
Вставляем через -img- , все нормально отображается.
Браузер IE 11.

Как пофиксить для background-image, чтобы изображение было четким?

PS: 5 Час бьюсь, не могу решать проблемку (((

UPDATE:
Проблему решил. У меня в верстке к контейнеру div где фоновым изображением был svg применялся - border-radius. Именно в нем вся проблема. Причем мылит он не только svg, но и обычные png/jpg. Явный баг в осле (IE11).
Достаточно применить для осла правило border-radius: 0; и изображения становятся четкими.
  • Вопрос задан
  • 1140 просмотров
Пригласить эксперта
Ответы на вопрос 2
Apathetic
@Apathetic
Frontend
Ответ простой: background-image не пофиксить никак, пока разработчики IE сами этот баг не пофиксят. Проблема возникает чаще всего, если используются относительные единицы (как в контейнере, содержащем svg, так и в самом svg). Так что либо используйте абсолютные единицы (не факт, что проблема уйдет), либо инлайновый svg.
Ответ написан
Комментировать
@WebAirStudio
Тоже столкнулся с этой проблемой.
Использовал rem с высокой точностью, типа background-size:1.56789rem;
Решение - округлять до десятых. background-size:1.5rem;
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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