jQuery и CSS анимации прерывистый в Firefox

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

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

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

6
animation css firefox hardware-acceleration jquery

3 ответов

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

12

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

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

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

4

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

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

0