Created attachment 86604 [details] Testcase to show perf issue and compositing Hi everyone, at Zynga, we produce scrolling viewports with thousands of <div>'s. A couple of them feature sprite animations, and we want to accelerate them in the GPU, therefore we're adding a translate3d rule to a child node of these. The basic setup is usually a page with lots of absolutely positioned elements. The issue: If you GPU accelerate a single of the elements (or a child of it), all children with a higher z-index or implicit stack index become accelerated as well. Why is this problematic? GPU accelerated elements eat more memory, and nested GPU compositing is slowing down the page tremendously. Open the added testcase in your iPhone and try panning the viewport, which won't be snappy. Now remove the transform from the CSS, and you'll see a huge difference. This is a single element we changed, causing a huge overall performance breakdown on the page, and it will not be apparent to the standard web developer. There a a couple of implementation suggestions to effectively isolate content: 1) If the accelerated element is a child of another, check if the parent is overflow hidden, and then not accelerate anything on the same level than the parent (as nothing can really overlap anyway) 2) Add proximity to the check - if two elements are not close to each other, disable the "leaking" to other elements. I'm looking forward to more suggestions and fixes :) Thanks, Paul
Created attachment 86625 [details] Testcase