[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