unpredictably sluggish performance stalls on 3d css animations -webkit-transform even with fast graphics card
This was tricky to track down but I've completely fixed it:
The issue appears to be that when an object that does NOT have a 3d transform suddenly gets one, there is a "stall" while the bitmap for that element is sent over to the video card. When you have a lot of items doing this, it can be very noticeable and turn your 60fps experience to ... something less.
The answer is quite simple: keep "null" 3d transforms on your items even if they're not 3D at the moment. This way the images will be transferred to the video card early, and when you need to animate them you won't hit a big lag.
This will work: -webkit-transform: translateZ(1px)
This might work but I could imagine it being optimized out in future versions (since it has not visible effect) -webkit-transform: translateZ(0px)