2012-01-20 12 views
6

多くのjQueryアニメーションを扱うminisiteに取り組んでいます。 Safari、Chrome & IE9ではうまく動作しますが、OSXのFirefox(7、8 & 9)ではアニメーションが実際に不安定です。私はCSSアニメーションがスムーズになると思ったので、私はadaptedのiPad版をFirefoxで試してみました。それはちょうど悪いようです。jQueryとCSSのアニメーションFirefoxの不具合

私はFirefoxに多くの時間を費やしていないので、ここで何が間違っているのか分かりません。 GPUアクセラレーションを起動する必要がありますか(WebkitのtranslateZ(0)を使用するなど)、それはすべての時間(IE9など)で常時使用されていますか?

私は本当に助けていただきありがとうございます。私はこの上に私のロープの最後にあるのです。

+0

ちょうどあなたが知っているように、アニメーションは私にとってもちょっとばかりです。私はデュアルジェネオンクアッドコア+ NVIDIA QuadroシステムでWin 7 64ビット版でChrome 16を実行しています – xbonez

答えて

11

Firefoxを見て回って質問すると、FirefoxはDOMアニメーションだけでなく他のブラウザも処理しないようです。だから私はちょうど不安定なFirefoxのアニメーションで生きなければならないように見えます。

+7

最近私はFirefoxのバグを経験したことがあります。ブラウザを放棄してください。 –

0

私は、アニメーションは、ファイアウォールがウィンドウされている間に吃音しないことに気づきました。 私はWin 7 x32を使用しています。彼らは本当に滑らかに働く。

アニメーションは、トランジションのみの間に少しばれています。残りは良いです&そのウェブサイトは驚くべきです&これまで行って素晴らしい仕事!

+0

ありがとうございますが、芸術とコンセプトはデザイナーのものです。 –

3

私はこの質問が何年も前に尋ねられたことを知っていますが、私はただそれに遭遇しました。そして、 'firefox sucks'を除いて本当の答えはありません。 firefoxでdom要素をアニメーション化するためのハードウェアアクセラレーションを有効にすることの秘訣は、あなたの翻訳と一緒に小さな回転を追加することです。例えば:それは途切れ途切れだ

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

理由は、(特にテキスト)をアニメ化されたdiv要素の中には何もブレないようにすることです。私は個人的にこれがデフォルト動作の正しい選択だとは思わないが、推論hereを見ることができます。

+0

これは私のためのトリックでした - 奇妙な! – alib0ng0