[Webkit-unassigned] [Bug 216701] New: WebKit incorrectly composites hundreds of elements when using position: relative

[bugzilla-daemon at webkit.org]

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

            Bug ID: 216701
           Summary: WebKit incorrectly composites hundreds of elements
                    when using position: relative
           Product: WebKit
           Version: Safari Technology Preview
          Hardware: Unspecified
                OS: Unspecified
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Compositing
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: ldebeasi at gmail.com

Created attachment 409137

  --> https://bugs.webkit.org/attachment.cgi?id=409137&action=review

Code Reproduction

When an element with a 3d transform is placed in the same scrollable container as elements with position: relative, the elements with position: relative are incorrectly composited.

The Layers pane in Safari claims this is due to the relative elements overlapping the transformed element, even when they are not. Removing position: relative from these elements resolves the issue. Additionally, using a 2d transform instead of a 3d transform resolves the issue as well.

This issue was observed in STP 113, but can be reproduced in Safari 13 as well. Additionally, this issue can be reproduced on both macOS and iOS.

Steps to reproduce:

1. Open the attached code reproduction in Safari.
2. Open dev tools and navigate to the "Layers" tab. The default layout has a div with a 3d transform and a list of divs with position: relative. You should notice that there are over 150 layers rendered.
3. Uncheck the "Use 3D Transform" checkbox. This will use a 2d transform instead. You should observe that there are only 2 layers now.
4. Recheck the "Use 3D Transform" checkbox.
5. Uncheck the "Use div with position: relative" checkbox. This will remove position: relative from the list items. You should observe that there are only 3 layers now.

When selecting a list element layer, Safari indicates that it was composited because it "overlaps other compositing elements". The element is overlapping the scrollable container which is composited; however, this additional compositing only happens when the element with a 3d transform is present. In this case, no list item overlaps the element with 3d transform.

There are 2 reasons why I think this is a bug:

1. This behavior does not happen in Chrome. Chrome never composites the list items.
2. Given a scrollable list, this issue significantly degrades scrolling performance. It is most noticeable on an iPad.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20200918/eb244a96/attachment-0001.htm>