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

Question

[andrewayder]

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

Comments

[Flying]

Попробуйте выложить пример на Codepen и скиньте ссылку, из исходников моргание не видно :)

Answer 1

[Flying]

На StackOverflow есть прекрасный ответ, описывающий причину и решение (точнее хак, но он помогает).

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

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

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