[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
bugzilla-daemon at webkit.org
Wed Sep 30 16:42:53 PDT 2020
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>
More information about the webkit-unassigned
mailing list