Transform performance on mobile applications

Just a quick one today.  I have read on several web pages that if you want to speed up the rendering of your site that you need to add -webkit-transform: translate3d(0,0,0) to the page elements to have the browser use the GPU to render the page instead of the CPU.

I tried this trick several times and it never seemed to work.  But I think that today I figured out why not.

I would apply this trick to a container element that houses the things that were animating.  This may not seemed to have been the correct way of doing it.  I had a DIV with a UL and several LI elements in it.  I applied the trick to the DIV under the assumption that it would accelerate everything in the container.

I think I was wrong.  It almost looks like you need to apply the trick to the individual element that you are animating.  In my case, the LI elements because they start out with a height of 0px and are expanded to Xpx.  The animations worked fine beforehand, but as soon as it was coupled with automated scrolling of the container the performance would drop tremendously down to around 6-8 frames per second.  When I moved the translate3d() trick from the DIV to the LI elements the animations and the scrolling became quite smooth.

So the lesson of the day is that if you want to use the GPU trick, apply it directly to the elements you are animating and not their container.

Additionally, it seems like applying the GPU trick also messes up CSS fixed position elements.  In other words, position: fixed ends up being not so.