Bug 244849

Summary:	Wrong painting order of inline backgrounds when forming an stacking context.
Product:	WebKit	Reporter:	Emilio Cobos Álvarez (:emilio) <emilio>
Component:	CSS	Assignee:	Nobody <webkit-unassigned>
Status:	NEW ---
Severity:	Normal	CC:	karlcow, mattwoodrow, simon.fraser, webkit-bug-importer
Priority:	P2	Keywords:	BrowserCompat, InRadar
Version:	Other
Hardware:	Unspecified
OS:	Unspecified

Description Emilio Cobos Álvarez (:emilio) 2022-09-06 10:02:21 PDT

(1) Open http://software.hixie.ch/utilities/js/live-dom-viewer/saved/10658
(2) See how the behavior is inconsistent if the <span> is an inline vs. if it's a block. It seems like WebKit fails to create a proper stacking context for the inline, or the background is painted in the wrong order.

The block behavior seems correct since z-index on the span creates a stacking context (just like opacity or other similar properties).

FWIW this caused a compat issue on Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1789039
Chromium bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1359985#c4

Comment 1 Radar WebKit Bug Importer 2022-09-07 14:54:40 PDT

<rdar://problem/99666982>