У меня есть несколько значков, которые настроены на анимацию при наведении (так что на каждый значок приходится два изображения, статический PNG и анимированный GIF).Поскольку значки должны быть отзывчивыми, я использую класс Bootstrap img-fluid для каждого элемента img.
В Chrome статическое изображение и анимированная версия отображаются правильно - края гладкие и сглаженные,Однако в Firefox и Chrome анимированные GIF-изображения выглядят точечно, и я не знаю почему.Это просто из-за того, что каждый браузер отображает измененные изображения, или я могу исправить это?
Пример Codepen здесь - наведите курсор на каждую иконку, чтобы увидеть, что происходит.В Firefox и Edge наблюдается заметный скачок между статическим PNG с плавными краями и пиксельным GIF.Этого не происходит в Chrome.
Если это имеет значение, мои версии каждого браузера:
- Firefox 65.0.1
- Microsoft Edge 44.17763.1.0
- Google Chrome 72.0.3626.119
Помощь высоко ценится.