1790747 - Overlay scrollbar is too wide on Windows 11

Status: UNCONFIRMED

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

Description

[Pierre Ossman]

Attachment: scroll.html

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:102.0) Gecko/20100101 Firefox/102.0

Steps to reproduce:

Go to a page where dynamically sized content needs a scroll bar. See attached file for a test case.

Actual results:

Content is obscured by the scrollbar, making it difficult to interact with it (e.g. select it).

Expected results:

Unclear. But switching to overlay scrollbars breaks existing sites where the layout was designed with the expectation of a gutter.

Perhaps dynamically sized elements should still have extra space allocated for the overlay scrollbar?

Comment 1

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

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

Comment 2

[Pierre Ossman]

This is a regression on Linux and Windows 11 where overlay scrollbars were recently added. No other browser has them, which means that sites will likely not be designed with them in mind (and how do you even design for both overlay and gutter scrollbar?).

For a real-world example, you can just look at a standard bugzilla (bmo has lots of additions that makes it avoid this issue).

Note that macOS also has overlay scrollbars since ages, but they behave a bit differently. They refuse to appear with most interaction, which means they aren't in the way. On the other hand, that also means it's a pain in the ass to scroll an element like the one in the attached test case.

Comment 3

[Hiroyuki Ikezoe (:hiro)]

Pierre, thanks for reporting this bug.

(In reply to Pierre Ossman from comment #0)

Created attachment 9294582 [details]
scroll.html

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:102.0) Gecko/20100101 Firefox/102.0

Steps to reproduce:

Go to a page where dynamically sized content needs a scroll bar. See attached file for a test case.

Actual results:

Content is obscured by the scrollbar, making it difficult to interact with it (e.g. select it).

Can you elaborate about "making it difficult to interact with" a bit more? To me it's easy to tell what will happen by seeing the mouse cursor icon. Or you just meant the overscroll scrollbar width is too thin?

Comment 4

[Timothy Nikkel (:tnikkel)]

Probably some of the discussion in bug 1786016 is relevant as context.

Comment 5

[Pierre Ossman]

Attachment: Screenshot from 2022-09-23 09-33-09.png

Trying to select text is the main issue I currently have with it, but in theory I could imagine clicking buttons or such things could also be affected.

The problem is that the scroll bar is simply in the way. All mouse events will go to the scroll bar instead of the text/button/whatever that is behind it. So it's not an issue of it being confusing what will happen.

See the attached screenshot for an example. The last line there is now impossible to select. You can try it live here:

https://bugzilla.cendio.com/show_bug.cgi?id=7989#c3

Comment 6

[Hiroyuki Ikezoe (:hiro)]

Okay, thanks for the screenshot. It was captured on Windows 11, right? At least on my Linux box Ubuntu 22.04, the scrollbar width isn't so wide so that I can easily select text at the last line.

Anyway, a workaround is to add ui.useOverlayScrollbars integer pref and set it to 0.

Comment 7

[Emilio Cobos Álvarez (:emilio)]

Or go to the windows accessibility settings and set the "always show scrollbars" flag

Comment 8

[Pierre Ossman]

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

Okay, thanks for the screenshot. It was captured on Windows 11, right? At least on my Linux box Ubuntu 22.04, the scrollbar width isn't so wide so that I can easily select text at the last line.

Actually, it's Fedora 35. So I would assume that means it's GNOME's default look. I guess that also means that Ubuntu has modified the look of the scrollbars in some way.