jQuery и CSS анимация изменчива в Firefox

Question

Я работаю над мини-сайтом, на котором много анимации jQuery. Он отлично работает в Safari, Chrome и IE9, но анимация в Firefox (7, 8 и 9) на OSX действительно прерывистая. Я думал, что CSS-анимация будет более плавной, поэтому я адаптировал версию сайта для iPad и опробовал ее в Firefox. Кажется, все так же плохо.

Я не провел много времени с Firefox, поэтому я не уверен, что я делаю здесь неправильно. Нужно ли запускать ускорение графического процессора (например, с помощью translateZ(0) в Webkit, или он просто используется постоянно для всего (например, IE9?)). Firefox просто недостаточно мощный, даже с графическим процессором?

Я очень ценю любую помощь, которую могу получить. Я нахожусь в конце моей веревки на этом.

Answer 1

После большого количества осмотра и задавания вопросов кажется, что Firefox просто не обрабатывает анимацию DOM так же, как другие браузеры. Так что, похоже, мне просто придется жить с изменчивой анимацией Firefox.

Answer 2

Я знаю, что этот вопрос задавался много лет назад, но я наткнулся на него, и нет никакого реального ответа, кроме "Firefox отстой". Хитрость в том, чтобы включить аппаратное ускорение для анимации элементов dom в Firefox, заключается в добавлении небольшого поворота вместе с вашим переводом. Например:

@keyframes square-animation {
    0%, 100% {
        transform: translate(600px, 160px) rotate(0.01deg);
    }
    50% {
        transform: translate(355px, 160px) rotate(0.01deg);
    }
}

Причина, по которой он изменчив, состоит в том, чтобы избежать размытия чего-либо внутри анимации div (особенно текста). Хотя я лично не думаю, что это правильный выбор для поведения по умолчанию, вы можете увидеть причину здесь.

Answer 3

Я заметил, что анимация не заикается, когда Firefox работает в окне, я нахожусь на Win 7 x32. Они работают очень гладко.

Анимации немного изменчивы, а переходы только. Отдых - это хорошо, и этот сайт - удивительная и удивительная работа, которую вы проделали до сих пор!