jQuery e animazioni CSS Choppy in Firefox

Question

Sto lavorando su un minisite che presenta un sacco di animazione jQuery. Funziona perfettamente in Safari, Chrome & IE9, ma l'animazione è veramente instabile in Firefox (7, 8 & 9) su OSX. Pensavo che l'animazione CSS sarebbe stata più fluida, quindi ho provato la versione per iPad del sito e ho provato a farlo in Firefox. Sembra altrettanto brutto.

Non ho trascorso molto tempo con Firefox, quindi non sono sicuro di cosa sto facendo male qui. Devo attivare l'accelerazione GPU (come l'uso di translateZ (0) in Webkit) oppure è sempre usato per tutto (come IE9?) Firefox non è abbastanza potente, anche con la GPU?

Apprezzerei molto ogni aiuto che posso ottenere. Sono un po 'alla fine della mia corda su questo.

Answer 1

Dopo una discreta quantità di guardarsi intorno e fare domande, sembra che Firefox non gestisca l'animazione del DOM e gli altri browser. Quindi sembra che dovrò vivere con un'animazione choppy di Firefox.

Answer 2

Ho notato che le animazioni non balbettano mentre il firefox è in finestra, Sono su Win 7 x32. Funzionano perfettamente liscio.

Le animazioni sono un po 'discontinue solo durante le transizioni. Il resto è buono & che il sito web è un sorprendente & straordinario lavoro che hai fatto finora!

Answer 3

So che questa domanda è stata fatta anni fa ma mi sono imbattuto in esso e non c'è una risposta reale a parte "firefox sucks". Il trucco per abilitare l'accelerazione hardware per l'animazione di elementi dom in firefox è aggiungere una piccola rotazione insieme al tuo traduttore. Per esempio:

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

Il motivo è mosso è quello di evitare la sfocatura qualsiasi cosa all'interno del div essere animato (soprattutto di testo). Sebbene personalmente non ritenga che questa sia la scelta giusta per il comportamento predefinito, è possibile vedere il ragionamento here.