unpredictably sluggish performance stalls on 3d css animations -webkit-transform even with fast graphics card

I have an extremely complex web app with complex 60fps animations done using -webkit-transform and -webkit-transition. There are often dozens of items animating simultaneously. When it's "up to speed," the animation looks great, but when the user gives input there is sometimes a "slowdown" in the animation that is quite visible. Much of the animation is extremely performant, but when many items are transitioning from static to moving there is a perceptible lag that I have not been able to locate in the javascript.


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)

Need Your Help

CSS Multiple background just for 1 DIV


Is it possible to have 1 div and set multiple background for each height ?

How to create addon plugins for C#

c# mef

Everyone's been saying use MEF. And that's it. Now for the life of me I cannot figure out how to use it.