[Webkit-unassigned] [Bug 56917] New: GPU composited content cannot be isolated from other elements on the page

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=56917

           Summary: GPU composited content cannot be isolated from other
                    elements on the page
           Product: WebKit
           Version: 528+ (Nightly build)
          Platform: All
        OS/Version: All
            Status: UNCONFIRMED
          Severity: Critical
          Priority: P2
         Component: Layout and Rendering
        AssignedTo: webkit-unassigned at lists.webkit.org
        ReportedBy: pbakaus at zynga.com
                CC: simon.fraser at apple.com


Created an attachment (id=86604)
 --> (https://bugs.webkit.org/attachment.cgi?id=86604&action=review)
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

-- 
Configure bugmail: https://bugs.webkit.org/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the assignee for the bug.