I've been having trouble figuring out why the jQuery animation on a website I just started working on was moving so slowly.. It turns out that it has something to do with background-size:cover being applied to a large background image on the body tag.
The slow performance is only happening in Firefox, it works fine in safari and chrome. I even tried disabling all add-ons but it doesn't seem like any of them are causing issues.
When I turn off background-size in firebug, my jQuery slideDown effects work smoothly. But when I turn it back on, they become much jerkier. The same thing happens when I try animating using CSS3 transitions instead.
Does anyone have any ideas why the background-size property is impacting the animations?
The specific page in question is located at: If you hover over any of the boxes in the right hand column, you should see the animation.