As I develop a website with jQuery to manage CSS class switching for animations, I have encountered a strange issue. While Google Chrome and Internet Explorer 9/10 work perfectly, Firefox (Aurora 24 and Firefox 23) does not perform the animations smoothly, although the functionality remains intact.
For example, when clicking a button to hide one box and show another, Chrome smoothly transitions between the two, while Firefox lacks the smooth transition. Surprisingly, manually changing the CSS value through the console seems to trigger the animation.
The site features around 10 simultaneous animations, with only 5 of them functioning properly. Disabling the heaviest 3 animations resolves the problem, suggesting a potential overload issue in Firefox.
I regret that I cannot provide a JSFiddle as creating one results in it working fine without showing the problem.
The problematic code snippet is:
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");
});
Although it may be hard to grasp without a functional example, this code snippet animates a page slider where the current page slides left or right based on its position relative to the newly requested page, which simultaneously slides in from the opposite direction. To achieve this, I utilize the following plugin: https://github.com/zachstronaut/jquery-css-transform.
I seek insight into whether this behavior reflects a known bug in Firefox.
Edit:
To view a live demo of the page, visit:
Please note that due to exporting via "Save page as...", the demo may exhibit some bugs. Click on the FIRST CLICK ME!! menu entry and then try toggling between the two CLICK ME menu entries.
In response to discussions about vendor prefixes:
This Fiddle demonstrates Firefox's support for the non-prefixed version, indicating that the issue lies elsewhere: