Mastodon: Alternative JavaScript scrollbars for Firefox

[ghost]

Since Firefox doesn't allow webkit scrollbars, there should be an alternative JavaScript scrollbar for Firefox. Firefox uses the default ones from the operating system and they look very ugly. It's just a small design change, but this makes Mastodon on Firefox usable for me then. It also makes the site accesible for designers with OCD.

---

• [x] I searched or browsed the repo’s other issues to ensure this is not a duplicate.
• [ ] This bug happens on a tagged release and not on master (If you're a user, don't worry about this).

[sorin-davidoi]

While I also dislike the scrollbars in Firefox, I don't think re-implementing them is a viable solution. Maintenance cost and performance overhead are too big (I am not even sure how we would go around hiding the native ones).

[ghost]

Hiding scrollbars is done with overflow: hidden, but checking the browser before in JS is recommended, so it doesn't mess up of course. Sadly there is no other way around. Otherwise Mozilla should roll out their own version of webkit-scrollbar.

[sorin-davidoi]

Wouldn't overflow: hidden also prevent scrolling? Anyway, I think that will cause some accessibility issues, and it also reduces the current functionality.

[nolanlawson]

This topic has come up many many times (e.g. https://github.com/tootsuite/mastodon/issues/2770). Unfortunately custom scrollbars aren't a web standard; we also do something special for Edge at the moment (https://github.com/tootsuite/mastodon/pull/975).

"Fixing" this would require implementing a custom scrollbar which is terrible for performance (disables browser optimizations to move scrolling off-main-thread, does a lot of work on the UI thread, is janky and hard to make accessible) which is why we've avoided it up to now. (I wrote a blog post about how complicated scrolling is, basically browsers work very hard to make it smooth, and custom scrollbars undo a lot of that hard work.)

Firefox for the moment has decided not to implement the proprietary WebKit scrollbar feature, but you can follow their progress here: https://bugzilla.mozilla.org/show_bug.cgi?id=77790. In the meantime I've also heard of some folks using Firefox extensions, but I'm not sure which ones.

[sorin-davidoi]

As a workaround, you can use Stylus together with the following style (you may need to adjust the background color).

.scrollable {
    margin-right: -18px;
}

.column::after {
    content: ""; 
    background: #191b22;
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    height: 100%;
}

.column:last-child::after {
    width: 10px;
}

.scrollable > * {
    margin-right: 10px;
}