2012-01-20 1 views
6

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.jQuery e animazioni CSS Choppy in Firefox

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.

+0

Solo per quello che sai, anche le animazioni sono leggermente discontinue. Sto eseguendo Chrome 16 su Win 7 a 64 bit su un sistema quad-core Dual Xeon + nVidia Quadro – xbonez

risposta

11

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.

+7

Ultimamente ho riscontrato troppi bug in Firefox, dovremmo tutti abbandonare il browser. –

0

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!

+0

Grazie, ma l'arte e il concept sono di progettazione, l'ho appena spostato e roba del genere. –

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.

+0

Questo ha fatto il trucco per me - strano! – alib0ng0