1. On Facebook, find an image post with lots of comments 2. Click on the image to make it fullscreen, with the comments in a sidebar 3. Scroll the comments
<rdar://problem/66411757>
Created attachment 406982 [details] test reduction It looks like flex layout ignores "position: sticky" content when computing the layout overflow. Works fine when the content is relatively positioned.
This looks to be fixed in Chrome.
Created attachment 406983 [details] test reduction
with position: sticky B---YGL- --* RenderView at (0,0) size 2302x1252 renderer->(0x141981240) B-----L- -- HTML RenderBlock at (0,0) size 2302x1252 renderer->(0x1419816f0) node->(0x141981540) B------- -- BODY RenderBody at (8,8) size 2286x1236 renderer->(0x141981820) node->(0x141981660) B--O--L- -- DIV RenderBlock at (0,0) size 2286x500 renderer->(0x141982d60) node->(0x1419829a0) (layout overflow 0,0 2271x600) B------- -- DIV RenderFlexibleBox at (0,0) size 2271x300 renderer->(0x141983ad0) node->(0x141983710) (layout overflow 0,0 2271x600) (visual overflow 0,0 2271x600) B------- -- DIV RenderBlock at (0,0) size 100x300 renderer->(0x141983c70) node->(0x1419837a0) (layout overflow 0,0 100x600) (visual overflow 0,0 100x600) B------- -- DIV RenderBlock at (0,0) size 100x600 renderer->(0x141983da0) node->(0x141983890) BK----L- -- DIV RenderBlock at (0,275) size 100x210 renderer->(0x141983ed0) node->(0x141983980) with position: relative B---YGL- --* RenderView at (0,0) size 2302x1252 renderer->(0x141981240) B-----L- -- HTML RenderBlock at (0,0) size 2302x1252 renderer->(0x1419816f0) node->(0x141981540) B------- -- BODY RenderBody at (8,8) size 2286x1236 renderer->(0x141981820) node->(0x141981660) B--O--L- -- DIV RenderBlock at (0,0) size 2286x500 renderer->(0x141982d60) node->(0x1419829a0) (layout overflow 0,0 2271x810) B------- -- DIV RenderFlexibleBox at (0,0) size 2271x300 renderer->(0x141983ad0) node->(0x141983710) (layout overflow 0,0 2271x810) (visual overflow 0,0 2271x600) B------- -- DIV RenderBlock at (0,0) size 100x300 renderer->(0x141983c70) node->(0x1419837a0) (layout overflow 0,0 100x810) (visual overflow 0,0 100x600) B------- -- DIV RenderBlock at (0,0) size 100x600 renderer->(0x141983da0) node->(0x141983890) BR----L- -- DIV RenderBlock at (0,600) size 100x210 renderer->(0x141983ed0) node->(0x141983980) scrolling overflow is 600px vs 810px (where the sticky box height is 210px).
The sticky box, due to its vertical position (at 275px) does not contribute to the scrolling overflow, while the relatively positioned box(at 600px) does.
Actually it fails even with no flex item.
fails: fixed 'height: 300px;' -> incorrect scrollable overflow. (B)lock/(I)nline/I(N)line-block, (A)bsolute/Fi(X)ed/(R)elative/Stic(K)y, (F)loating, (O)verflow clip, Anon(Y)mous, (G)enerated, has(L)ayer, (C)omposited, (+)Dirty style, (+)Dirty layout B---YGL- --* RenderView at (0,0) size 2302x1252 renderer->(0x1465f9240) B-----L- -- HTML RenderBlock at (0,0) size 2302x1252 renderer->(0x1465f96f0) node->(0x1465fb920) B------- -- BODY RenderBody at (8,8) size 2286x1236 renderer->(0x1465f9820) node->(0x1465fbb00) B--O--L- -- DIV RenderBlock at (0,0) size 2286x504 renderer->(0x1465faca0) node->(0x1465fab50) (layout overflow 2,2 2267x610) B------- -- DIV RenderBlock at (2,2) size 2267x300 renderer->(0x14772c1b0) node->(0x1465fbb90) (layout overflow 0,0 2267x610) (visual overflow 0,0 2267x610) B------- -- DIV RenderBlock at (0,0) size 100x610 renderer->(0x14772c2e0) node->(0x1465fbc20) BK----L- -- DIV RenderBlock at (0,500) size 100x110 renderer->(0x14772c410) node->(0x1465fbcb0) works: fixed 'height: 300px;' -> child 'height: auto' -> used height 720px; -> correct delegated scrollable overflow. (B)lock/(I)nline/I(N)line-block, (A)bsolute/Fi(X)ed/(R)elative/Stic(K)y, (F)loating, (O)verflow clip, Anon(Y)mous, (G)enerated, has(L)ayer, (C)omposited, (+)Dirty style, (+)Dirty layout B---YGL- --* RenderView at (0,0) size 2302x1252 renderer->(0x1465f9240) B-----L- -- HTML RenderBlock at (0,0) size 2302x1252 renderer->(0x1465f96f0) node->(0x1465fb920) B------- -- BODY RenderBody at (8,8) size 2286x1236 renderer->(0x1465f9820) node->(0x1465fbb00) B--O--L- -- DIV RenderBlock at (0,0) size 2286x504 renderer->(0x1465faca0) node->(0x1465fab50) (layout overflow 2,2 2267x720) B------- -- DIV RenderBlock at (2,2) size 2267x300 renderer->(0x14772c1b0) node->(0x1465fbb90) (layout overflow 0,0 2267x720) (visual overflow 0,0 2267x720) B------- -- DIV RenderBlock at (0,0) size 2267x720 renderer->(0x14772c2e0) node->(0x1465fbc20) B------- -- DIV RenderBlock at (0,0) size 100x610 renderer->(0x14772c410) node->(0x1465fbcb0) BK----L- -- DIV RenderBlock at (0,375) size 100x110 renderer->(0x14772d660) node->(0x1465fbda0)
It looks like we use the sticky position in RenderBox::layoutOverflowRectForPropagation() to compute the overflow (as if it was relative positioned with something like "height: 100px; bottom: 100px;")
Created attachment 407247 [details] Patch
Committed r266156: <https://trac.webkit.org/changeset/266156> All reviewed patches have been landed. Closing bug and clearing flags on attachment 407247 [details].