Bug 261302 – REGRESSION (265576@main): Wrong paint order of positioned and in-flow content inside overflow:scroll

• Status: RESOLVED
• Resolution: FIXED
• Component: Layout and Rendering

[Simon Fraser (smfr)]

https://xs9627.github.io/iOS17-position-bug/ shows a bug where the position:absolute content appears below in-flow content in Safari, inside overflow:scroll.

[Radar WebKit Bug Importer]

<rdar://problem/115144982>

[Simon Fraser (smfr)]

A workaround for this bug is to put `will-change: z-index;` on the container

[Simon Fraser (smfr)]

The layer tree looks like:

(S)tacking Context/(F)orced SC/O(P)portunistic SC, (N)ormal flow only, (O)verflow clip, (A)lpha (opacity or mask), has (B)lend mode, (I)solates blending, (T)ransform-ish, (F)ilter, Fi(X)ed position, Behaves as fi(x)ed, (C)omposited, (P)rovides backing/uses (p)rovided backing/paints to (a)ncestor, (c)omposited descendant, (s)scrolling ancestor, (t)transformed ancestor
Dirty (z)-lists, Dirty (n)ormal flow lists
Traversal needs: requirements (t)raversal on descendants, (b)acking or hierarchy traversal on descendants, (r)equirements traversal on all descendants, requirements traversal on all (s)ubsequent layers, (h)ierarchy traversal on all descendants, update of paint (o)rder children
Update needs:    post-(l)ayout requirements, (g)eometry, (k)ids geometry, (c)onfig, layer conne(x)ion, (s)crolling tree
Scrolling scope: box contents

S---------C-c-- -- ------ ------ 2 2 0x112000950 (0,0) width=1220 height=1109 [SA 0x110020480] (layerID 26) {sc 2} RenderView 0x1120003d0
S-----------c-- -- ------ ------ 2 2   + 0x1120017d0 (0,0) width=1220 height=1109 [SA 0x110020780] RenderBlock 0x112001690 HTML 0x112001010
--O-------CPc-- -- ------ ------ 2 2     + 0x1120035a0 (28,28) width=400 height=400 [SA 0x110020840] (layerID 35) clipping RenderBlock (positioned) 0x112003460 DIV 0x112002f50 class='page'
-NO-------C---- -- ------ ------ 2 3       n 0x112003810 (0,0) width=400 height=400 [SA 0x110020900] (layerID 34) {sc 3} RenderBlock 0x1120036d0 DIV 0x112002fd0 class='container'
-----------p-s- -- ------ ------ 2 2     + 0x112003a80 (0,0) width=400 height=50 RenderBlock (positioned) 0x112003940 DIV 0x112003130 class='header'

so 0x112003a80 is painting into the backing of 0x1120035a0 but there is composed layer in between, which is a no-no.

[Antti Koivisto]

Pull request: https://github.com/WebKit/WebKit/pull/17588

[Simon Fraser (smfr)]

I ended up with exactly the same patch as in the PR.

[Simon Fraser (smfr)]

Pull request: https://github.com/WebKit/WebKit/pull/17798

[EWS]

Committed 268028@main (416e2026cb6c): <https://commits.webkit.org/268028@main>

Reviewed commits have been landed. Closing PR #17798 and removing active labels.

[Simon Fraser (smfr)]

*** Bug 262951 has been marked as a duplicate of this bug. ***