jquery を使用して CSS クラスを切り替える Web サイトをコーディングしています。これらのクラスは CSS アニメーションを実行します。
Google Chrome と Internet Explorer 9/10 ではすべてが完全に機能し、Firefox (Aurora 24 と Firefox 23) ではアニメーションは実行されませんが、残りは機能します。
たとえば、ボックスを非表示にして別のボックスを表示するボタンをクリックすると、Chrome ではスムーズな遷移でアニメーションが実行され、Firefox ではスムーズな遷移なしで実行されます。
奇妙なことは、アニメーション化する必要がある CSS 値をコンソールで変更すると、アニメーションが機能することです。
このサイトには、同時に実行される約 10 個のアニメーションがありますが、正しく動作するのは 5 個だけです。
最後の (そしてより重い) 3 つのアニメーションを無効にしようとすると、問題が解決します。Firefox で適切に管理されていない一種の過負荷ではないでしょうか?
JSFiddle を作成すると機能するため、JSFiddle を提供できず、問題を示すことができません...
これは、問題を引き起こすコードの一部です。
console.log("3D Accelerated animation");
console.log("oldpage = "+oldpage+"\npage = "+page+"\nnewpage = "+newpage);
if(oldpage != newpage) eoldpage.removeClass("active");
$(".slider > li").attr("style", "").removeClass("animation");
epage.css({"transform": "translate3d(0, 0, 0)"});
enewpage
.css({"transform": "translate3d(" + pagew * db + "px, 0, 0)"})
.addClass("active");
eboth.addClass("animation");
enewpage.children("section").load('/pages/' + newpage + ".php?lang=" + lang, function() {
var hmorpher = enewpage.children().height();
$("#heightmorpher").css({"height": hmorpher});
$(".parallax").css({"height": Math.pow(hmorpher + 200, 600)});
epage.css({"transform": "translate3d(" + (pagew * da * 2) +"px, 0px, 0px)"});
enewpage.css({"transform": "translate3d(0px, 0px, 0px)"});
$("body").removeClass("active");
});
実際の例がないと理解しにくいことはわかっています。
簡単に言うと、コードのこの部分によって生成されるアニメーションは一種のページ スライダーであり、現在のページは (新しく呼び出されたページに対するメニュー内の位置に応じて) 左または右にスライドし、新しいページはその位置でスライドします。同時に反対方向から。
このプラグインを使用します: https://github.com/zachstronaut/jquery-css-transformを使用して、すべてのブラウザーで変換をアニメーション化します。
だから私は、Firefox のこの動作に関するバグについて誰かが知っているかどうかを尋ねるためにここにいます。
.
編集：
ここにページのライブデモがあります: http://demo.mywebexpression.com/customers/pelplastic/
「名前を付けてページを保存...」でエクスポートしたため、少しバグがあります。ちなみに、FIRST CLICK MEをクリックしてください!! メニュー エントリを選択してから、2 つのCLICK MEメニュー エントリを切り替えてみてください。
ベンダープレフィックスについて話す人のために：
この Fiddle は、Firefox がプレフィックスなしのバージョンをサポートしていることを示しているため、問題はベンダー プレフィックスではありません。