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

Steps to reproduce:

Went to youtube.com mozilla.org etc sites that have content on them and need scrollbars. went to what's new in about firefox in help. and saw that windows 11 type scrollbars are supported.

Actual results:

The new scrollbars are not new. they are just shortened versions of the old ones.

Expected results:

Get a windows 11 pc for this. Go to settings or youtube.com in edge browser on windows 11. Notice the scrollbars. Compare them with the scrollbar of firefox.

what it should be replaced with.

Comment on attachment 9263651 [details]
the whole scrollbar (expected)

it doesn't show what I screenshoted though.

Comment on attachment 9263651 [details]
the whole scrollbar (expected)

I screenshoted the whole scrollbar.

The Bugbug bot thinks this bug should belong to the 'Core::Widget: Win32' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Emilio, these scrollbars seem to resemble what you once showed me that you were seeing on your device. Did you find out what was happening there?

Which app is the "Expected result" screenshot from? For non-overlay scrollbars (like the task manager ones), what I see is what we implement on Firefox.

Reporter, if you set ui.useOverlayScrollbars=1 in about:config, you should see the overlay scrollbar style, which I suspect should match your expected result.

Stephen, I guess the real question here is whether we should enable overlay scrollbars by default in Windows 11. As long as scrollbars are not overlayed, I think our implementation is correct.

screenshot is taken from Windows 11 Settings app

(In reply to Emilio Cobos Álvarez (:emilio) from comment #7)

Which app is the "Expected result" screenshot from? For non-overlay scrollbars (like the task manager ones), what I see is what we implement on Firefox.

Reporter, if you set ui.useOverlayScrollbars=1 in about:config, you should see the overlay scrollbar style, which I suspect should match your expected result.

Stephen, I guess the real question here is whether we should enable overlay scrollbars by default in Windows 11. As long as scrollbars are not overlayed, I think our implementation is correct.

Um, Should I set it as boolean, string or number?

As a number :)

Yeah so if you took this from settings it is expected. Can you confirm that your task manager scrollbars look like firefox's?

Just a moment please.

Task manager looks like settings.

(In reply to Emilio Cobos Álvarez (:emilio) from comment #10)

As a number :)

Yeah so if you took this from settings it is expected. Can you confirm that your task manager scrollbars look like firefox's?

what number?

(In reply to yuvanmichaelvivenzi from comment #12)

Task manager looks like settings.

That's odd, it has thick scrollbars for me... But anyways.

(In reply to yuvanmichaelvivenzi from comment #13)

what number?

1

(In reply to Emilio Cobos Álvarez (:emilio) from comment #14)

(In reply to yuvanmichaelvivenzi from comment #12)

Task manager looks like settings.

That's odd, it has thick scrollbars for me... But anyways.

(In reply to yuvanmichaelvivenzi from comment #13)

what number?

1

It didn't work actually.

Task manager scrollbar

(In reply to Emilio Cobos Álvarez (:emilio) from comment #14)

(In reply to yuvanmichaelvivenzi from comment #12)

Task manager looks like settings.

That's odd, it has thick scrollbars for me... But anyways.

(In reply to yuvanmichaelvivenzi from comment #13)

what number?

1

update your Windows 11 system. This is not there in Windows 10.

To be honest, if you just round those corners off. This issue/bug would be fixed. And of course, expand the scrollbar when the mouse is hovered on it. See the images for clarification.

The arrows in the scrollbar up and down ones are correct. Its the actual bar that's not.

Also, shorten the thickness more when mouse is not hovering over it.

(In reply to yuvanmichaelvivenzi from comment #15)

It didn't work actually.

What didn't work? Did it change the appearance of the scrollbars at all? It should cause scrollbars not to take up space. Also, there's the widget.non-native-theme.win11.scrollbar.force-overlay-style pref which should have the same effect but keep scrollbars taking up space.

(In reply to yuvanmichaelvivenzi from comment #1)

update your Windows 11 system. This is not there in Windows 10.

Well, I have an up-to-date Win11 system (in fact I'm using the insiders version), so that's why I'm surprised. My scrollbars in e.g., task manager (and all other win32 apps) look like Firefox's. So I guess we need to figure out what exactly determines the win11 scrollbar appearance... :)

So per discussion in Element, apparently there are two behaviors (the one from comment 0, and the one from bug 1747618 comment 0), and it's not clear which one is the intended.

We see this across a variety of Windows versions (I have Windows Education N, Paul has Windows 11 Home Insider Preview, Version: Dev, 22543.1000, and Kagami is on beta with 22000.527).

So we're going to try to contact Microsoft to try to figure out what's going on, since apparently even dev channel machines disagree with each other.

(In reply to yuvanmichaelvivenzi from comment #15)

It didn't work actually.

To address possible confusion: did you set ui.useOverlayScrollbars to 1, or did you set ui.useOverlayScrollbars=1 to 1? The second one wouldn't do anything.

FWIW, I get comment 1 type of scrollbars both in Firefox and in TaskManager (and most other Windows apps) on a Windows 11 machine (2560x1600, 200% scaling). Win11 Pro 21H2, 22000.493.

But, if I change scaling to 100%, scrollbars on TaskManager behave differently. They become very narrow, except when hovering on top of them they are wider again. Firefox doesn't end up having as narrow scrollbars.

And Windows seems to be inconsistent itself too. Windows Settings uses always narrow type of scrollbars even when scaling is at 200%. That is when TaskManager uses wider scrollbars. Also, some apps seems to be able to react to changes to scaling, some don't, so better to restart them after modifying scaling.

Very interesting, I get comment #0 type of scrollbar on Task Manager (and most other Windows apps) on a Windows 11 machine (2560x1080 100% scaling + 2736x1824 200% scaling multiple monitors). Pro 21H2 22000.527.

(In reply to Emilio Cobos Álvarez (:emilio) from comment #23)

Created attachment 9264838 [details]
Emilio and Paul's task manager.

So per discussion in Element, apparently there are two behaviors (the one from comment 0, and the one from bug 1747618 comment 0), and it's not clear which one is the intended.

We see this across a variety of Windows versions (I have Windows Education N, Paul has Windows 11 Home Insider Preview, Version: Dev, 22543.1000, and Kagami is on beta with 22000.527).

So we're going to try to contact Microsoft to try to figure out what's going on, since apparently even dev channel machines disagree with each other.

This one looks exactly like firefox's! Maybe the insider channels fallback when stuff to this when stuff fails or something? Mine is curved. Check the image for clarification.

Does it maybe depend on the type of hardware connected to the machine? Touchscreen, touchpad, regular mouse, pen, etc?

widget.non-native-theme.win11.scrollbar.force-overlay-style set to true fixes the issue!

(In reply to Timothy Nikkel (:tnikkel) from comment #28)

Does it maybe depend on the type of hardware connected to the machine? Touchscreen, touchpad, regular mouse, pen, etc?

Maybe! Mine is just a desktop with mouse and keyboard, nothing fancy. I could update a laptop I have around with touch screen, but then I lose the ability to test Windows 10 so I'd rather not do that yet. Anyways, we contacted Microsoft about this, let's see if they confirm that theory or not.

(In reply to yuvanmichaelvivenzi from comment #29)

widget.non-native-theme.win11.scrollbar.force-overlay-style set to true fixes the issue!

Yeah, it's expected. As mentioned we implement both styles, we just need to figure out when to display one or the other.

A minor dot update which sets
widget.non-native-theme.win11.scrollbar.force-overlay-style
to true
would fix this for everyone.

(In reply to yuvanmichaelvivenzi from comment #32)

Well, the point is that this isn't broken for everyone, so changing that pref will fix it for you, but break it for other people. On some machines Windows scrollbars look one way and on others they look another way. Once we figure out why we can do the right thing automatically.

(In reply to Emilio Cobos Álvarez (:emilio) from comment #33)

(In reply to yuvanmichaelvivenzi from comment #32)

Well, the point is that this isn't broken for everyone, so changing that pref will fix it for you, but break it for other people. On some machines Windows scrollbars look one way and on others they look another way. Once we figure out why we can do the right thing automatically.

Couldn't this be carried out to nightly or something? Get some feedback and then decide?

I believe this is something to do with DPI.

It gets both styles on my multimonitor setup with one being 100% scale and the other being 200% scale. It becomes thin when I set the scale to 100%.

(In reply to Kagami :saschanaz from comment #35)

Created attachment 9266280 [details]
image.png

I believe this is something to do with DPI.

It gets both styles on my multimonitor setup with one being 100% scale and the other being 200% scale. It becomes thin when I set the scale to 100%.

Maybe its because since windows 11 isn't mature enough. And also that its just a fresh coat of paint over windows 10, It may rely on windows 10 scrollbars when the scaling is above 100%

Also if you pay very close attention to the detail. You would see that the scrollbar is rounded when mouse is hovering over it.

see in image. Firefox scrollbar.

firefox scrollbar when mouse is hovered.

firefox 97.0.2