Why does background-size: cover; slow down my jquery animation?

Question

I've been struggling to understand why the jQuery animation on a site I've just started building was running so sluggish.. Turns out it is something to do with background-size:cover that I have applied to a large background image on the body tag.

The sluggish performance is only happening to me in Firefox, its fine in safari and chrome and I tried disabling all add-ons so dont think its anything like that affecting things.

When I switch off background-size in firebug my jQuery slideDown effects run smoothly. Put it back on and they run much more jerky. Same thing happens when I animate using CSS3 transitions instead.

Any ideas why the background-size property is affecting the animations?

The page in question is: http://flc.timidmedia.co.uk/ If you hover any of the boxes on the right hand column you should see then animation.

Answer 1

Probably happens because background-size:cover has to make additional calculations to render properly.

See this explanation of what needs to happen to make it work.

cover

Specifies that the background image should be scaled to be as small as possible, while ensuring both its dimensions are greater than or equal to the corresponding dimensions of the background positioning area.

https://developer.mozilla.org/en/CSS/background-size

Just guessing, but maybe FF's engine is slow on this one?