1789039 - z-index:-1 not obscuring a ::before border-effect under its source element in Firefox, but does in Chrome

Status: RESOLVED INVALID

(Core :: Web Painting, defect, P3)

Description

[Thomas Wisniewski [:twisniewski]]

Attachment: testcase.html

This bug is a spin-off of a webcompat.com report.

In the attached test-case, the blue border of the orange box (a ::before effect with z-index:-1 is drawing under the orange box in Blink/WebKit, but not in Firefox. I believe this should be working, and it does if I drop the z-index:6 on the main element.

This is affecting reinforceeu.eu's "Join our newsletter!" button, which is where the reduced test-case comes from.

Comment 1

[Emilio Cobos Álvarez (:emilio)]

I think our behavior is correct. z-index creates a stacking context so it doesn't let children escape. Chrome behaves the same if the span is display: block rather than display: inline, and I don't see why it should behave differently.

Comment 2

[Emilio Cobos Álvarez (:emilio)]

I filed https://bugs.chromium.org/p/chromium/issues/detail?id=1359985, I think this is a Chrome bug.

Comment 3

[Emilio Cobos Álvarez (:emilio)]

Chrome team confirmed it's their bug, see link there.