Documented Bugs Of Firefox/jquery/css Animations Together?

I'm coding a website that uses jquery to switch CSS classes, these classes run CSS animations. In Google Chrome and Internet Explorer 9/10 everything works perfectly, on Firefox

Solution 1:

I believe the issue is your use of the CSS3 rule -webkit-tranform this only covers "webkit" browsers.

Instead you need to set all the browser specific rules:

-webkit-transform: translate3d(0px, 0px, 0px);  /* Chrome, Safari 3.1+ */
-moz-transform:    translate3d(0px, 0px, 0px);  /* Firefox 3.5-15 */
-ms-transform:     translate3d(0px, 0px, 0px);  /* IE 9 */
-o-transform:      translate3d(0px, 0px, 0px);  /* Opera 10.50-12.00 */transform:         translate3d(0px, 0px, 0px);  /* Firefox 16+, IE 10+, Opera 12.10+ */

This site http://css3please.com/ will help a lot, it generates css3 with the browser specific names.

Hope that helps :)