jQuery and CSS Animations Choppy in Firefox

Question

I'm working on a minisite that features a lot of jQuery animation. It works fine in Safari, Chrome & IE9, but the animation is really choppy in Firefox (7, 8 & 9) on OSX. I thought CSS animation would be smoother, so I adapted the iPad version of the site and tried that out in Firefox. It seems just as bad.

I haven't spent a lot of time with Firefox, so I'm not sure what I'm doing wrong here. Do I need to trigger GPU acceleration (like using translateZ(0) in Webkit,) or is it just used all the time for everything (like IE9?) Is Firefox just not powerful enough, even with the GPU?

I'd really appreciate any help I can get. I'm kind of at the end of my rope on this.

Answer 1

After a fair amount of looking around and asking questions, it seems that Firefox just doesn't handle DOM animation as well as the other browsers. So it looks like I'll just have to live with choppy Firefox animation.

Answer 2

I know this question was asked years ago but I just stumbled upon it and there is no real answer aside from 'firefox sucks'. The trick to enabling hardware acceleration for animating dom elements in firefox is to add a small rotation along with your translate. For example:

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

The reason it's choppy is to avoid blurring anything within the div being animated (especially text). While I personally don't think this is the right choice for default behaviour, you can see the reasoning here.