I'm working on a rather CPU-intensive web application. I've started using -webkit-transform: translate3d(0, 0, 0) on certain elements to improve average framerates, as suggested by http://davidwalsh.name/translate3d and http://www.html5rocks.com/en/tutorials/speed/html5/, among others. This tweak makes a pretty significant difference in rendering performance, particularly in Chrome.
If I apply this technique to a single animated element, does it trigger hardware acceleration for the entire page, or just for that element? Or perhaps it only triggers hardware acceleration for that element's rendering layer?
Studying the output of Chrome's "Composited render layer borders" (in chrome://flags) seems to suggest that the behavior is limited to the specified element, but it'd be nice to have a more concrete answer.
Only during the animation for the element. Hardware acceleration, according to http://www.html5rocks.com/en/tutorials/speed/html5/ is only applied to:
"General layout compositing" (The initial rendering of the page)
"CSS3 transitions" and "CSS3 3D transitions" (Applied to a single element during the transition to assist the framerate)
"Canvas Drawing" and "WebGL Drawing" (Not applicable to your question)