Bug 203941 – Element with negative z-index and fixed position drawn with wrong stacking order

• Status: NEW
• Component: Compositing

[Jared Jacobs]

Created attachment 383016 [details]
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

[Radar WebKit Bug Importer]

<rdar://problem/56972891>