Bug 275209 – REGRESSION (Safari 17.5): Can't scroll flexbox container

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

[Dimitris]

It seems like with the latest update for mobile Safari (17.5) scrolling inside of flexbox containers has stopped working!

Here is an example I have created: https://codepen.io/xjimdim/pen/KKLqwOr

In all other browsers the .container element has a scrollbar and you can scroll through its children but on Safari 17.5 it seems like the .container has overflow hidden and no scrolling is allowed.
All other versions of Safari work fine.

[Alexey Proskuryakov]

Steps to reproduce: move the pointer over the box with "1" in it, try scrolling (I reproduced with two-finger scroll on a trackpad).

[Radar WebKit Bug Importer]

<rdar://problem/129343181>

[Simon Fraser (smfr)]

We're failing to compete that we should have any layout overflow on the container. This is a layout bug.

[Simon Fraser (smfr)]

Broke at https://commits.webkit.org/273737@main

[fantasai]

Created attachment 471631 [details]
reduced testcase

Caused by clipping content overflowing a flex container's child when that flex container has end alignment.

If the content were in-flow, we would measure and align it, and allow scrolling up to see any excess; but since it's overflowing down, we need to scroll down and since we flipped the scrolling direction for end-aligned flex containers we can't scroll down from the origin.

[fantasai]

Created attachment 471632 [details]
patch (rough draft)

This switches us back to a "allow scrolling downward only" model in general, but measures in-flow flex items that flow upward due to end alignment and allows scrolling up just enough to see *those* (similar to what Block and Grid currently do). It needs more testing to make sure it handles all the various coordinate systems, but it seems to fix the testcase.

[fantasai]

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

[EWS]

Committed 279992@main (ce08f3245391): <https://commits.webkit.org/279992@main>

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

[Dimitris]

Any clue about when this is gonna be rolled out to production (safari mobile)?

[fantasai]

I can't comment on release schedules, but you can work around the issue by using `safe flex-end` instead of `flex-end`.

https://developer.mozilla.org/en-US/docs/Web/CSS/align-content
https://www.w3.org/TR/css-align-3/#overflow-values

[Dimitris]

Just tested using "safe flex-end" instead of "flex-end" and it still does not work :/ Updated in the example link too https://codepen.io/xjimdim/pen/KKLqwOr