Bug 221483

Summary: [Interop 2021][css-flexbox] painting order issue
Product: WebKit Reporter: Sergio Villar Senin <svillar>
Component: Layout and RenderingAssignee: Ahmad Saleem <ahmad.saleem792>
Status: NEW    
Severity: Normal CC: ahmad.saleem792, bfulgham, erik.anderson, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: BrowserCompat, InRadar, WPTImpact
Version: WebKit Nightly Build   
Hardware: Unspecified   
OS: Unspecified   
URL: http://wpt.live/css/css-flexbox/flexbox-paint-ordering-002.xhtml
Bug Depends on:    
Bug Blocks: 136754    
Attachments:
Description Flags
repro demonstrating different properties that create a stacking context all trigger the bug none

Sergio Villar Senin
Reported 2021-02-05 09:35:16 PST
New imported WPT tests is failing: imported/w3c/web-platform-tests/css/css-flexbox/flexbox-paint-ordering-002.xhtml
Attachments
repro demonstrating different properties that create a stacking context all trigger the bug (2.34 KB, text/html)
2026-07-07 21:03 PDT, erik.anderson 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2021-02-12 09:36:17 PST
<rdar://problem/74279579>
Ahmad Saleem
Comment 2 2023-08-17 01:07:40 PDT
https://searchfox.org/wubkat/source/LayoutTests/TestExpectations#4530 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-paint-ordering-002.xhtml [ ImageOnlyFailure ] STP176 is still failing this test case.
erik.anderson
Comment 3 2026-07-07 21:03:18 PDT
Created attachment 480421 [details] repro demonstrating different properties that create a stacking context all trigger the bug I ran into this in a personal project (involving overlapping playing cards that I wanted to visually sort without modifying DOM order). I'm attaching a minimal repro that more clearly shows the bug is triggered whenever a flex item forms a stacking context (isolation: isolate, opacity < 1 , transform, will-change, position: relative; z-index: 0, filter, etc.). The order value is ignored for paint order and items stack in source order. The workaround I used is to mirror the order value into a z-index property value.
Ahmad Saleem
Comment 4 2026-07-24 00:42:33 PDT
Pull request: https://github.com/WebKit/WebKit/pull/70102
Note You need to log in before you can comment on or make changes to this bug.