1851749 - autoscrolling doesn't work on scrollable flex container with `flex-direction:column-reverse`

Status: NEW

(Core :: Layout: Scrolling and Overflow, defect, P3)

Description

[cheeseyx]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/117.0

Steps to reproduce:

Create an element which has vertical overflow. Set the element to display: flex and flex-direction: column-reverse. Use the middle mouse button to try to pan the element.

(For a quick example, go to https://www.w3schools.com/css/tryit.asp?filename=trycss_overflow_scroll and add display: flex and flex-direction: column-reverse to the div's style)

Actual results:

The middle mouse click is ignored and does not enable panning the element.

Or, if there are 2 axes of overflow, the pan icon used is the one for only horizontal scrolling (although it does correctly pan in both directions)

Expected results:

The middle mouse click should treat the element as vertically scrollable.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::Layout: Flexbox' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Alice0775 White]

Attachment: testcase

Comment 3

[Alice0775 White]

https://searchfox.org/mozilla-central/source/toolkit/actors/AutoScrollChild.sys.mjs#118
scrollTopMax is used to determine if auto-scrolling is possible.

However, The elementflex-direction: column-reverse's scrollTopMax is 0.

Comment 4

[Daniel Holbert [:dholbert]]

Thanks for the bug report (and for the code reference, Alice0775 -- here's the permalink for that searchfox URL, in case the code changes out from under us.

Side note: we refer to this feature as "autoscrolling". (That's the name for the "click the middle mouse button and then pan up and down, to scroll" feature.) Autoscrolling happens to be disabled-by-default in Firefox on my system (on Linux), I think because the platform convention on Linux is for middle-click to paste. But I enabled it by toggling about:config option general.autoScroll to true -- and with that, I can reproduce this bug.

Comment 5

[Daniel Holbert [:dholbert]]

(In reply to Alice0775 White from comment #3)

https://searchfox.org/mozilla-central/source/toolkit/actors/AutoScrollChild.sys.mjs#118
scrollTopMax is used to determine if auto-scrolling is possible.

However, The elementflex-direction: column-reverse's scrollTopMax is 0.

This is exactly the issue, yeah. For a scrollable column-reverse flex container (as in the attached testcase), the default JS-exposed scrollTop value is 0 (when it's scrolled to the initial position, i.e. the bottom). If you scroll upwards from there, scrollTop becomes negative. (This is true in Chrome as well.)

So: it's invalid for JS code to assume that a scrollTopMax of 0 means something's not scrollable.

The autoscrolling code moved around a bit over the years, but it looks like this scrollTopMax and scrollLeftMax usage was introduced here for bug 914251:
https://hg.mozilla.org/mozilla-central/rev/71b3fa2eb87d128d642e40175a223ab4ea0e514d#l2.29

It looks like we ran into this exact same issue for RTL horizontally-scrollable content in bug 962249. Bug 962249 comment 3 is essentially describing the exact same issue that we're hitting here, except for horizontal right-to-left content.

Comment 6

[Daniel Holbert [:dholbert]]

And we did fix it for horizontally-scrollable content (confirmed with a testcase), here:
https://hg.mozilla.org/mozilla-central/rev/bc5b89d9eace#l7.13

That didn't fix this for vertically-scrollable content though. We want the same fix here, comparing the scrollTopMin value to scrolllTopMax here, like we did for scrollLeftMin/scrollLeftMax there.

(The min values are internal-only and not exposed to unprivileged web content, it looks like.)

Comment 7

[Daniel Holbert [:dholbert]]

Attachment: Bug 1851749: Update our autoscroll code to handle bottom-to-top scrollable content. r?#layout-reviewers,xidorn

This lets autoscrolling work with (for example) flex-direction:column-reverse
scrollable content, for which the initial scrollTop of 0 is also the maximum
scroll position, and scrolling proceeds in the negative direction.

We addressed this long ago for the horizontal analog (right-to-left scroll
containers), where we started comparing scrollLeftMin to scrollLeftMax here:
https://hg.mozilla.org/mozilla-central/rev/bc5b89d9eace#l7.13

...but that patch didn't handle the veritcal case (at least, not in this
autoscrolling code).

This patch here fixes that inconsistency, and that's sufficient to make
autoscrolling work for bottom-to-top scrollable content.

Comment 8

[Daniel Holbert [:dholbert]]

(ni=me as a reminder to add a test if possible, as noted in moz-phab)

Comment 9

[manstie]

I also came across this issue on Linux with autoScroll set to true (Ubuntu 24, FF 127.0.1). I made an example here https://playcode.io/1920891 before I found that the bug report already exists.

Comment 10

[Daniel Holbert [:dholbert]]

Sorry, I know this is still sitting and needs a test and then landing -- I don't have time for that today but can hopefully circle back to this soon. (For now, I'm just marking it as being related to bug 1042151 which is where this reverse-scrolling behavior was introduced.)