[Webkit-unassigned] [Bug 217154] New: Absolutely positioned and negative z-index div with canvas child gets drawn with wrong stacking order

[bugzilla-daemon at webkit.org]

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

            Bug ID: 217154
           Summary: Absolutely positioned and negative z-index div with
                    canvas child gets drawn with wrong stacking order
           Product: WebKit
           Version: Safari 14
          Hardware: All
                OS: All
            Status: NEW
          Severity: Major
          Priority: P2
         Component: Layout and Rendering
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: jean.timex at gmail.com
                CC: bfulgham at webkit.org, simon.fraser at apple.com,
                    zalan at apple.com

Created attachment 410171

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

Screenshot of incorrect stacking order

Steps to reproduce:
1. Navigate to http://jsfiddle.net/jeantimex/Lsvyz0nj/
2. Notice that there are two divs (blue and red)

What to expect:
The red div should stack above the blue div.

Actual result:
The blue div stacks above the red div.

Comments:
Both blue and red divs are positioned absolutely, the blue div has a canvas child. Both divs have the same negative z-index.

This bug does not happen on Chrome, Firefox, IE, Edge. It affects all Safari browsers on all platforms.

Workarounds:
1. Change both z-index to positive, e.g., 1 (however, in some business cases, it's expected both divs have the same negative z-index).
2. Change the red view z-index to 0. (however, in some business cases, it's expected both divs have the same negative z-index).
3. Set transform: translateZ(0) or translate3d(0, 0, 0) to the red div. (I guess this will force a paint for the red div in a different layer)

-- 
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/20200930/d2d92097/attachment-0001.htm>