Bug 215719 – Facebook post with lots of comments has cut off scrollbar, and can't scroll fully to the bottom (sticky)

• Component: Layout and Rendering
• Status: RESOLVED FIXED

[alan]

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

[alan]

<rdar://problem/66411757>

[alan]

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.

[alan]

This looks to be fixed in Chrome.

[alan]

Created attachment 406983 [details]
test reduction

[alan]

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).

[alan]

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.

[alan]

Actually it fails even with no flex item.

[alan]

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)

[alan]

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;")

[alan]

Created attachment 407247 [details]
Patch

[EWS]

Committed r266156: <https://trac.webkit.org/changeset/266156>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 407247 [details].