Смещение SVG при анимации в Mozilla

271
23 марта 2017, 20:20

Здравствуйте. Подскажите, пожалуйста, с проблемой. Есть верстка. Там кнопка Скачать. При наведении стрелка опускается вниз. В Хроме все окей. В Опере тоже. А в Мозиле происходит еле заметное (буквально 1px) смещение стрелки влево, из-за чего происходит маленький скачок, а также SVG становится не такой четкой. Почему такое может происходить?

Answer 1

Проблема в том, что при анимации браузер меняет режим отрисовки вектора с "красивого" на "для анимации".

Решение 1

Укажите конкретно режим прорисовки:

<svg ...  shape-rendering="crispEdges" ... >
...
</svg>

Решение 2

Иконку нужно перерисовать.

Располагайте элементы svg строго по пикселям. Ваш документ просто набит дробными значениями:

Если числа, отвечающие за горизонтальные и вертикальные линии будут целые, у браузера не возникнет проблем к какому пикселю ее отнести:

ПОСЛЕДНИЕ ВОПРОСЫ
Все вопросы
Подробнее о сайте standart-s.com.ua
ТОП-10
READ ALSO
Адаптивная верстка на три блока
CSS

Адаптивная верстка на три блока

Нужно такое сформировать:

 288
Когда отключен denwer не работает Mysql
MySQL

Когда отключен denwer не работает Mysql

Я всегда без без проблем подключался к базам данных на своем компьютере по localhost через любые программы по типу navicat или просто через терминал...

 322
Как привязать два поля в базе данных
MySQL

Как привязать два поля в базе данных

Имеется база для пользователей (родители и дети):

 364
Несколько результатов из БД, с учётом сортировки
MySQL

Несколько результатов из БД, с учётом сортировки

Имеется таблица book в которой около 50 записейПоля таблицы id(int),name(varchar),path(text),lang(int, value = 1,2,3)

 272