2057397 - Regression: Firefox 153 changes scrollbar behavior for websites using webkit scrollbar CSS

Status: UNCONFIRMED

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

Description

[altaytuna900]

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

Actual results:

Firefox version: 153.0
Operating System: Windows 11

After updating to Firefox 153, some websites that use webkit scrollbar CSS rules have changed their scrollbar behavior.

Before this change, these websites used overlay scrollbars in Firefox. After the update, some pages display a separate scrollbar area with an additional line next to the scrollbar.

I understand that this change was made to improve web compatibility with websites designed for Chromium-based browsers. However, it also changes the visual appearance and behavior of existing websites for Firefox users.

I would like to suggest either reconsidering this behavior or adding a preference that allows users to disable this compatibility handling and keep the previous overlay scrollbar behavior.

Steps to reproduce:

1. Open a website that uses webkit scrollbar CSS rules.
2. Compare scrollbar appearance before and after Firefox 153.
3. Notice that the scrollbar area and visual separator have changed.

Expected result:
The previous overlay scrollbar behavior should remain available.

Actual result:
A separate scrollbar area appears with an additional line next to the scrollbar

Comment 1

[BugBot [:suhaib / :marco]]

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

[Hiroyuki Ikezoe (:hiro)]

You can flip layout.css.fake-webkit-scrollbar.enabled in about:config.

Comment 3

[Daniel Holbert [:dholbert]]

Can you give some examples of website URLs where this creates a worse experience in Firefox than in other browsers?

We shipped this behavior to fix real usability issues, like the one described in bug 1973196 comment 18, where previously Firefox users (those with overlay scrollbars at least) were unable to see/use the scrollbar at all. So there's a known usability benefit here, for some sites. But it's helpful to get concrete examples where it creates a worse experience in real websites too, if that's what you're describing.

Comment 4

[Rishi Menon]

I've noticed that the worst is that the scrollbar width doesn't change according to the width set inside -webkit-scrollbar, but the space it takes does, I think?. I came across this issue literally right now. In [this](https://ibb.co/zYgNLBW
https://ibb.co/Nd3hs4kt) image, i have ::-webkit-scrollbar { width: 1rem; }, along with html { background-color: red; }
Meanwhile, same thing on [Chrome](https://ibb.co/zYgNLBW
https://ibb.co/Nd3hs4kt).

Also a side effect of this issue is that any element with position: fixed; bottom: 0; say like a navbar on mobile, now doesn't stay at the bottom if auto hide toolbar on scroll is enabled. I observed this happening only when the scrollbar issue was present.

A bandaid I'm using for now is scrollbar-width: none;

Comment 5

[Rishi Menon]

My links messed up. Here are the correct ones: Firefox, Chrome

Comment 7

[mhaymo]

The above bug, closed as a duplicate, contains an example of one worsened experience, on lichess.com. Lichess devs have now worked around it by disabling their webkit-scrollbar styling in firefox. https://github.com/lichess-org/lila/issues/20844

Comment 8

[Daniel Holbert [:dholbert]]

For the issues here that are Android-specific (including comment 5 and that lichess one), bug 2057921 will likely help here.

Comment 9

[Hiroyuki Ikezoe (:hiro)]

Now I confirmed that the case in bug 2057587 comment 0 there's no scorllbar gutter region on the top level document on the latest Firefox android nightly. It means that the case in comment 4 (the screenshot tells us it's on mobile) should also be fixed.

That's being said, the original reporter was on Windows 11 so it sill remains an issue. We'd like to get feedback from him about which site causes unexpected scrollbars.

Setting P3:S3 for now, it may be bumped up depending on the feedback.