transform: scale immensely slow in all versions of firefox - performance

Question

Please check this:
http://users.telenet.be/prullen/grid.html
This has a normal speed in safari, but the zoom effect is really slow in firefox.
Interestingly, if I add:
.item {
width:100px;
height:100px;
}
it seems to speed up a little (still not completely fluent). But that is not the size my images are at, so it looks messed up:
http://users.telenet.be/prullen/grid2.html
If I set the item width/height to the size of my images, thing slow down again:
.item {
width:160px;
height:160px;
}
http://users.telenet.be/prullen/grid3.html
Any ideas as that what is the reason of this? I'm out of ideas, I've removed/added statements but nothing seems to help. This is tested in different firefox versions up to version 10.
Thanks,
Wesley

Answer 1

To get your animation boosted, you can remove the box-shadow property from #container .item .thumbnail, this property is heavy and slows your animation.
But if you still want the shadow effect, you can try putting it behind as a background and not as a part of the animation.
It should take some change, but removing the box-shadow property from the animated div will make it faster. The "item zoom" div is the one responsible for the animation. By splitting the "zoom" class from the "item" class, and applying the right css properties on each, the animation shall work faster. (I've tried it with firebug)
HTML:
<div class="item">
<div class="zoom">
<div class="thumbnail">
<img src="...">
</div>
</div>
</div>

Answer 2

Position your elements absolutely so they are not part of the normal flow of the document. This will make it so the browser doesn't try to redraw the page every-time an animation plays.
When elements are relatively positioned, they can affect each-other when one is changed, so they all have to be redrawn to make sure that changing one element didn't affect all of them.
I created a demo and absolutely positioned the elements, you can see that the animations are much more efficient.
Here is a demo: http://jsfiddle.net/QLTbU/