@andrewayder

Как исправить анимацию на gecko?

Здравствуйте, мне нужно исправить моргание анимации под не webkit браузеры (основная аудитория mozila)
в Google Chrome анимация плавная, но в mozila из-за оптимизации движка моргает, существуют ли подходы для решения подобной проблемы
https://jsfiddle.net/unknowne/rgk1fn6e/2/
Есть ли смысл переписать анимацию под svg для решения проблемы? (заметил что даже в google chrome при низкой высоте страницы анимация может дергаться)
Или как вообще правильно создавать такие анимации, нужно без js (так как будет отображаться в случае noscript)
  • Вопрос задан
  • 43 просмотра
Решения вопроса 1
@Flying
На StackOverflow есть прекрасный ответ, описывающий причину и решение (точнее хак, но он помогает).

Если вкратце - добавьте к вашей анимации микроскопический rotate:

@keyframes animStar {
	from {
		transform: translateY(0) rotate(0.05deg);
	}
	to {
		transform: translateY(-200vh) rotate(0.05deg);
	}
} ;


UPD: Вот bugreport (до сих по откытый) по этому поводу и объясение от разработчика почему rotate() помогает.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

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