smooth animation only in firefox 4

It seems that the following setup on jsfiddle only runs smoot开发者_开发问答h in firefox 4. http://jsfiddle.net/ynytc/39/

Im wondering why? I thought maybe because of the hardware acceleration in firefox 4, but without it still runs smooth.

So maybe someone knows why?

edit: compared to chrome,safari,ie8

You're animating over a 10 second period a change in size of only 20 pixels. That means that there's going to be only one integral dimension change every 1/2 second, which is exactly what I see in Chrome. The size of the image can't be set to fractions of a pixel (in all browsers). Firefox 4 seems to allow that, however; that's the only thing I can imagine anyway.

If you change your fiddle like this you'll see that Chrome is running the animation as fast as you could want it to, but the image only shifts when there's a whole integer change in the property value (width and height).

This is an interesting side effect that I hadn't encountered before.

It seems that other browsers can't apply subpixel scaling, so you only have 20 pixels to spread in 10 seconds, coming to a glorius 2 frames per second. The workaround for this would be to apply CSS transitions (if you don't need to support IE).

See example with CSS transitions here: http://jsfiddle.net/nKfdB/