[Webkit-unassigned] [Bug 203941] New: Element with negative z-index and fixed position drawn with wrong stacking order
bugzilla-daemon at webkit.org
bugzilla-daemon at webkit.org
Wed Nov 6 19:58:49 PST 2019
https://bugs.webkit.org/show_bug.cgi?id=203941
Bug ID: 203941
Summary: Element with negative z-index and fixed position drawn
with wrong stacking order
Product: WebKit
Version: Safari Technology Preview
Hardware: Macintosh
OS: macOS 10.14
Status: NEW
Severity: Normal
Priority: P2
Component: CSS
Assignee: webkit-unassigned at lists.webkit.org
Reporter: jmjacobs at cs.stanford.edu
Created attachment 383016
--> https://bugs.webkit.org/attachment.cgi?id=383016&action=review
Example showing the problem
An element with a fixed position and negative z-index gets drawn behind
a positioned sibling that has a higher negative z-index.
https://codepen.io/2is10/pen/BaaxLpM
Here's the relevant HTML and CSS:
<section>
<button class="absolute-front">1</button>
<button class="fixed-behind">2</button>
</section>
section { /* establishes a stacking context */
position: relative;
z-index: 0;
}
.absolute-front {
position: absolute;
z-index: -1;
}
.fixed-behind {
position: fixed;
z-index: -2;
top: 0;
}
The .fixed-behind button should be drawn behind the .absolute-front button,
but is instead drawn in front of it. Firefox and Chrome are correct.
Known workarounds:
1. Give .absolute-front a nonnegative z-index.
2. Switch .fixed-behind from fixed to absolute positioning.
3. Click the .fixed-behind button (!).
Versions of Safari known to be affected:
- Technology Preview Release 95 (Safari 13.1, WebKit 14609.1.7)
- Version 13.0.3 (14608.3.10.10.1)
Versions of Safari known to be correct:
- None
--
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/20191107/df8829b3/attachment.htm>
More information about the webkit-unassigned
mailing list