1973196 - Parts of Gmail emails cannot be scrolled into view horizontally by dragging the scrollbar, on configurations with overlay scrollbars

Status: NEW

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

Description

[Simona Badau, Desktop Test Engineering]

Attachment: Screenshot with the issue

Found in

• Nightly 141.0a1

Affected versions

• Nightly 141.0a1
• Firefox 140
• Firefox 139
• Firefox 128.12.0esr
• Firefox 115.25.0esr

Tested platforms

• Affected platforms: Windows 11, Ubuntu 25.04, macOS 15

Preconditions

• Launch Firefox with a e new profile and don't modify the default window size.
• Enable Vertical tabs and Sidebar from about:preferences#general.

Steps to reproduce

1. Log in to your Gmail account.
2. Open any email.
3. Using the mouse scroll horizontally to see the entire content of the mail.

Expected result

• Scrolling horizontally with the mouse should reveal the full email content.

Actual result

• Horizontal scrolling with a mouse does not expose the full email content. However, If a trackpad is available and used the entire content becomes visible.

Regression range

• Not a regression. The issue is reproducible on all current Firefox versions. Verified by resizing windows where vertical tabs and sidebar are unavailable to match the same dimensions.

Additional notes

• Unsure if Core :: Layout: Scrolling and Overflow is the appropriate component — please reassign if needed.

Comment 1

[BugBot [:suhaib / :marco]]

The severity field is not set for this bug.
:hiro, could you have a look please?

For more information, please visit BugBot documentation.

Comment 2

[Hiroyuki Ikezoe (:hiro)]

Note that you will have to change "Reading pane" setting to "Right of inbox" in your Gmail settings.

Though I don't see this bug at all on Ubuntu 24.04.

Simona, would you mind trying to scroll over the message pane in the first place?

I suspect this is just a side-effect of our wheel transaction, for example, given that there are two nested scroll containers, and the child one is smaller than the parent one, then if you initially scroll the parent one, then after the initial scroll the child one is under the mouse cursor, but the next wheel still scrolls the parent one if the next wheel happened within mousewheel.transaction.timeout.

Comment 3

[Simona Badau, Desktop Test Engineering]

Attachment: Screenrecording with the issue

(In reply to Hiroyuki Ikezoe (:hiro) from comment #2)

Note that you will have to change "Reading pane" setting to "Right of inbox" in your Gmail settings.

Though I don't see this bug at all on Ubuntu 24.04.

Simona, would you mind trying to scroll over the message pane in the first place?

I suspect this is just a side-effect of our wheel transaction, for example, given that there are two nested scroll containers, and the child one is smaller than the parent one, then if you initially scroll the parent one, then after the initial scroll the child one is under the mouse cursor, but the next wheel still scrolls the parent one if the next wheel happened within mousewheel.transaction.timeout.

"Right of inbox" is also enabled on my Google account. I’m able to scroll vertically without issues in both the message pane and the reading pane. The issue only occurs when the Vertical Sidebar is enabled and horizontal scrolling with the mouse is required.

I’ve recorded a screen capture comparing the behavior with and without the Vertical Sidebar. Please note that I did not make any modifications to the default window sizes - both are consistent with new profiles.

As shown in the recording, the vertical scrollbars differ: in the profile with the Vertical Sidebar enabled, the same vertical scrollbar appears to control both the message pane and the reading pane. In this setup, I can only scroll horizontally using my trackpad.

Comment 4

[Hiroyuki Ikezoe (:hiro)]

(In reply to Simona Badau, Desktop QA from comment #3)

As shown in the recording, the vertical scrollbars differ:

I suppose you meant the horizontal scrollbars? With the sidebar, there should be another horizontal scrollbar underneath of the other one.

Comment 5

[Hiroyuki Ikezoe (:hiro)]

Setting "Always show scrollbars" option in about:preferences helps identifying the other horizontal scrollbar. There are 3 horizontal scrollbars I can see.

Comment 6

[Simona Badau, Desktop Test Engineering]

(In reply to Hiroyuki Ikezoe (:hiro) from comment #4)

(In reply to Simona Badau, Desktop QA from comment #3)

As shown in the recording, the vertical scrollbars differ:

I suppose you meant the horizontal scrollbars? With the sidebar, there should be another horizontal scrollbar underneath of the other one.

Yes, you're right - I meant horizontal scrollbars.

Setting "Always show scrollbars" option in about:preferences helps identifying the other horizontal scrollbar. There are 3 horizontal scrollbars I can see.

I can find this setting in about:preferences on my Ubuntu 25.04 desktop. When I enable it, I see two horizontal scrollbars, but I need to scroll vertically all the way to the bottom for the third horizontal scrollbar to appear. Please see the screen recording here.

On my Windows 11 machine (Dell G5 laptop with an attached mouse), this option doesn’t appear in the Browsing section as it does on Ubuntu.

Comment 7

[Hiroyuki Ikezoe (:hiro)]

(In reply to Simona Badau, Desktop QA from comment #6)

(In reply to Hiroyuki Ikezoe (:hiro) from comment #4)

(In reply to Simona Badau, Desktop QA from comment #3)

As shown in the recording, the vertical scrollbars differ:

I suppose you meant the horizontal scrollbars? With the sidebar, there should be another horizontal scrollbar underneath of the other one.

Yes, you're right - I meant horizontal scrollbars.

Setting "Always show scrollbars" option in about:preferences helps identifying the other horizontal scrollbar. There are 3 horizontal scrollbars I can see.

I can find this setting in about:preferences on my Ubuntu 25.04 desktop. When I enable it, I see two horizontal scrollbars, but I need to scroll vertically all the way to the bottom for the third horizontal scrollbar to appear. Please see the screen recording here.

Looks like the format of the message in the recording is different from mines. It looks the message content itself has a sub scroll container so that the horizontal scrollbar is never visible until the bottom edge of the sub scroll container becomes visible. Though it's quite natural.

Anyways, I suppose you did scroll it by touchpad, you are not able to scroll it by horizontal mouse wheel, right?

Comment 8

[Hiroyuki Ikezoe (:hiro)]

(In reply to Hiroyuki Ikezoe (:hiro) from comment #7)

(In reply to Simona Badau, Desktop QA from comment #6)

(In reply to Hiroyuki Ikezoe (:hiro) from comment #4)

(In reply to Simona Badau, Desktop QA from comment #3)

As shown in the recording, the vertical scrollbars differ:

I suppose you meant the horizontal scrollbars? With the sidebar, there should be another horizontal scrollbar underneath of the other one.

Yes, you're right - I meant horizontal scrollbars.

Setting "Always show scrollbars" option in about:preferences helps identifying the other horizontal scrollbar. There are 3 horizontal scrollbars I can see.

I can find this setting in about:preferences on my Ubuntu 25.04 desktop. When I enable it, I see two horizontal scrollbars, but I need to scroll vertically all the way to the bottom for the third horizontal scrollbar to appear. Please see the screen recording here.

Looks like the format of the message in the recording is different from mines. It looks the message content itself has a sub scroll container so that the horizontal scrollbar is never visible until the bottom edge of the sub scroll container becomes visible. Though it's quite natural.

I found a such message in my spam folder. I can scroll the sub scroll container by horizontal wheel.

Simona, I am wondering if you set mousewheel.transaction.timeout to 0 in about:config, then if you try to scroll horizontally multiple times on the message, does it scroll the sub scroll container?

Comment 9

[Hiroyuki Ikezoe (:hiro)]

I am setting "Webcompat Priority: ?" since I believe this is a WebCompat issue. Though unfortunately I can't reproduce this issue at all, and :ajakobi told me he can't reproduce either.

Comment 10

[Simona Badau, Desktop Test Engineering]

(In reply to Hiroyuki Ikezoe (:hiro) from comment #7)

(In reply to Simona Badau, Desktop QA from comment #6)

(In reply to Hiroyuki Ikezoe (:hiro) from comment #4)

(In reply to Simona Badau, Desktop QA from comment #3)

As shown in the recording, the vertical scrollbars differ:

I suppose you meant the horizontal scrollbars? With the sidebar, there should be another horizontal scrollbar underneath of the other one.

Yes, you're right - I meant horizontal scrollbars.

Setting "Always show scrollbars" option in about:preferences helps identifying the other horizontal scrollbar. There are 3 horizontal scrollbars I can see.

I can find this setting in about:preferences on my Ubuntu 25.04 desktop. When I enable it, I see two horizontal scrollbars, but I need to scroll vertically all the way to the bottom for the third horizontal scrollbar to appear. Please see the screen recording here.

Looks like the format of the message in the recording is different from mines. It looks the message content itself has a sub scroll container so that the horizontal scrollbar is never visible until the bottom edge of the sub scroll container becomes visible. Though it's quite natural.

Anyways, I suppose you did scroll it by touchpad, you are not able to scroll it by horizontal mouse wheel, right?

I do not have a touchpad on my Ubuntu 25.04 dektop machine, and I use a regular mouse.

Simona, I am wondering if you set mousewheel.transaction.timeout to 0 in about:config, then if you try to scroll horizontally multiple times on the message, does it scroll the sub scroll container?

Regarding mousewheel.transaction.timeout, I don’t notice any change in behavior whether the preference is set to 0 or left at its default value.
I should note that I am able to scroll horizontally using the mouse wheel and the Shift key, regardless of the preference mentioned above.

Comment 11

[Hiroyuki Ikezoe (:hiro)]

Thanks for the additional info. Given that it works with Shift key, it's possible that for some reasons, this wheel delta is clamped to 0? Because the original wheel delta is too small, or the line size is too small?

On my environment, it's user-multiplied delta is (6.39844,0) (deltaType 0, line size (21 x 40), page size (621 x 1872)), FWIW.

The symptom is S2-ish, though there's a workaround that dragging the scrollbar thumb can scroll horizontally but the scroll thumb is hard to be noticed unfortunately. That's said, given that no person other than the reporter can reproduce, the bug is very limited to a certain environment, I guess it's the mouse device specific, so I am going to set P3:S3 for now.

Comment 12

[Daniel Holbert [:dholbert]]

Is this really a Firefox-specific bug? I think I'm seeing the same behavior in Chrome, when I give it the same size content-area as Firefox and view the same message in both.

(In my case, I'm using an REI order-confirmation email as my testcase. Not sure offhand which/how-many types of messages are affected, but this one does seem to be.)

Comment 13

[Daniel Holbert [:dholbert]]

In other words: if you resize a Chrome window in order to give Gmail about the same space as you gave to Firefox[1], can you reproduce the same issue there?

[1] (note that you may need to test Chrome with a somewhat-skinnier window-size, as compared to Firefox, in order to achieve the same Gmail content-area-size -- since some of Firefox's window is devoted to the sidebar)

Comment 14

[Simona Badau, Desktop Test Engineering]

(In reply to Daniel Holbert [:dholbert] from comment #13)

In other words: if you resize a Chrome window in order to give Gmail about the same space as you gave to Firefox[1], can you reproduce the same issue there?

[1] (note that you may need to test Chrome with a somewhat-skinnier window-size, as compared to Firefox, in order to achieve the same Gmail content-area-size -- since some of Firefox's window is devoted to the sidebar)

No, I can't reproduce the issue.
I tested using the latest Nightly 142 on Windows 11. I used only the mouse and scroll wheel — please see the video with a comparison between Firefox and Chrome.

Comment 15

[Daniel Holbert [:dholbert]]

I see what you mean in that screencast, yeah. But really I think that video might be showing the difference between "overlay-style" scrollbars vs. traditional scrollbars. (And overlay-style scrollbars do indeed seem to create a more confusing experience here due to the many nested scrollframes.)

On your Windows 11 machine, could you try changing the system setting to activate "Always show scrollbars" and see if you still see a Firefox/Chrome difference at that point? (I think you can find that in Win11 settings, Accessibility > Visual Effects > Always show scrollbars.) (As you observed in comment 6, we don't have this available in Firefox's own settings on Win11 - we defer to the system setting.)

Comment 16

[Daniel Holbert [:dholbert]]

Note, it's also possible to test Chromium with "overlay-style" scrollbars in Edge at least -- there's a setting in edge://flags called "Fluent overlay scrollbars" / #edge-overlay-scrollbars-win-style which makes Edge largely behave like Firefox (using overlay scrollbars if Windows always-show-scrollbars is turned off).

I just tried to test this in Edge with that setting, but Gmail-in-particular doesn't use overlay scrollbars for this horizontal scrollbar. That's because Gmail uses -webkit-scrollbar styles to specifically turn on a non-overlay scrollbar:

.Tm::-webkit-scrollbar, .aZ6::-webkit-scrollbar, .aiL::-webkit-scrollbar, .dOsDob::-webkit-scrollbar, .J-M::-webkit-scrollbar {
    width: 16px;
    height: 16px;
}

If I use DevTools to uncheck the width and height declarations there, then Edge-with-this-setting-toggled uses an overlay-style horizontal scrollbar on cropped email content, I think (?) just like Firefox does.

So this is sort of a version of bug 1432935 which is about support for -webkit-scrollbar selectors (though for now at least that's WONTFIX).

Comment 17

[Simona Badau, Desktop Test Engineering]

(In reply to Daniel Holbert [:dholbert] from comment #15)

I see what you mean in that screencast, yeah. But really I think that video might be showing the difference between "overlay-style" scrollbars vs. traditional scrollbars. (And overlay-style scrollbars do indeed seem to create a more confusing experience here due to the many nested scrollframes.)

On your Windows 11 machine, could you try changing the system setting to activate "Always show scrollbars" and see if you still see a Firefox/Chrome difference at that point? (I think you can find that in Win11 settings, Accessibility > Visual Effects > Always show scrollbars.) (As you observed in comment 6, we don't have this available in Firefox's own settings on Win11 - we defer to the system setting.)

With the "Always show scrollbars" option enabled in the OS settings, I no longer see a difference, and I’m now able to scroll horizontally to view the entire message.

Comment 18

[Daniel Holbert [:dholbert]]

Thanks.

So this is just an issue where the Gmail site design (with multiple nested scrollable areas) is not really usable with overlay scrollbars, since it has nested scrollable areas, with the inner one being sized-to-fit the outer one, so (with overlay scrollbars) the inner & outer scrollbars end up being superimposed and that means the scrollbar for the underneath one is inaccessible.

And Gmail's -webkit-scrollbar styling happens to avoid the issue (turning off overlay scrollbars) in overlay-scrollbar-enabled Chromium/WebKit, but doesn't in Firefox.

I think we can consider this diagnosed as bug 1977511.

Comment 19

[Daniel Holbert [:dholbert]]

(I attached a reduced testcase that exhibits the same badness as Gmail, over on bug 1977511.)

Comment 20

[Botond Ballo [:botond]]

Thank you Daniel for the additional investigation. I tweaked the issue title to clarify that this issue is specific to scrollbar dragging, as this was not clear to me before.

(This also means that the issue can be worked around by employing a different method of scrolling, whether it's autoscroll, Shift+mousewheel, or a touchpad swipe if applicable.)

Comment 21

[Daniel Holbert [:dholbert]]

I just retested, now that we've been shipping partial ::-webkit-scrollbar support (via bug 1977511), which was in large part an attempt to get a better outcome here. Unfortunately this turned out to be more complicated, and this bug isn't addressed.

I just poked into what's going wrong, and there are a few issues:

(A) UA-sniffing

Gmail (somewhat reasonably) doesn't actually serve the relevant ::-webkit-scrollbar styles at all to Firefox (the ones that specify a nonzero width and height for the scrollbar track), unless we spoof as Chrome (via e.g. Chrome Mask). In Chrome, the relevant webkit-scrollbar styles are in a large inline <style> element, whose text starts out with .J-J5-Ji{position:relative. Firefox gets that same <style> element with much of the same text, but there are some browser-specific bits in there; e.g. in Firefox's version, there's -moz-box-sizing alongside box-sizing in a few spots; and in Chrome's version, there's -webkit-transition alongside transition in a few spots. And importantly, in Chrome's version, there's a big chunk of webkit-prefixed scrollbar styles (starting with .J-M::-webkit-scrollbar)

(B) The webkit-scrollbar rules don't fully fix the usability issues (in any browser with overlay scrollbars)

The webkit-scrollbar rules do make the email listing and email-content panes have traditional scrollbars, but there are still issues with scrolling horizontally, because the top-level horizontal scrollbar remains overlay-style (in all browsers) and it behaves badly in browser-specific ways:

• In Chrome and Safari, that "top-level" horizontal scrollbar appears briefly (and covers up the email horizontal scrollbar) when you e.g. resize the window horizontally. Then it fades out and doesn't seem to ever come back, so there's no way to scroll the Gmail app itself horizontally (using a scrollbar).
• In Firefox (spoofing as Chrome), that "top-level" horizontal scrollbar appears and thickens whenever I hover the bottom of the viewport -- e.g. when I'm trying to drag one of the other horizontal scrollbars -- and it blocks clicks so that I can't actually horizontally scroll the email.

(note: in all cases, I've configured the browser to use overlay scrollbars. In Chrome this requires a tweak in chrome://flags . In Safari and Firefox on macOS, it's a system setting, "scrollbar behavior".)

So, this is still not really fixed despite our attempt here, on multiple levels, and it's broken to some extent in all browsers that use overlay scrollbars (which includes Chrome with an experimental configuration and Safari with [I think?] default configuration).

Comment 22

[Daniel Holbert [:dholbert]]

So at this point I think we should do outreach to Gmail folks to let them know about this issue and see if they can improve their usability to avoid this scrollbar overlap. And we should let them know that we have the ability to let ::-webkit-scrollbar force legacy scrollbars, and if they want to rely on that as part of mitigating the usability issues (as they seem to be sort-of doing), we'd like them to send us those styles, modulo bug 2057977.