Page MenuHomePhorge

Thin scrollbars on workboards do not work in Firefox (on Windows)
Closed, ResolvedPublic

Description

On Chromium-based browsers, workboard columns such as https://we.phorge.it/project/view/105/ have customized thin scrollbars:

we.phorge.it_project_view_105_ (3).png (1×3 px, 402 KB)

On Firefox, however, they have the default OS scrollbars:

Screenshot 2023-06-20 at 07-26-08 Maniphest · Workboard.png (2×3 px, 335 KB)

This is because they are defined using non-standard CSS pseudoelements ::-webkit-scrollbar and ::-webkit-scrollbar-thumb.

The default scrollbars can get really unsightly on large workboards, such as https://phabricator.wikimedia.org/project/view/4864/:

Screenshot 2023-06-20 at 07-27-41 Editing-team (Kanban Board) · Workboard.png (2×3 px, 759 KB)

Firefox supports the standard scrollbar-width: thin CSS property that can be used to achieve a similar effect: https://caniuse.com/mdn-css_properties_scrollbar-width

It would look like this:

Screenshot 2023-06-20 at 07-31-57 Maniphest · Workboard.png (2×3 px, 500 KB)

Screenshot 2023-06-20 at 07-32-20 Editing-team (Kanban Board) · Workboard.png (2×3 px, 774 KB)

(None of this applies if your OS does not display static scrollbars. macOS and many Linux environments only display overlay scrollbars by default.)

Other examples

Examples in GNU/Linux with KDE, on hover:

BeforeAfter
BEFORE_bar_hover.png (859×585 px, 150 KB)
AFTER_bar_hover.png (859×585 px, 150 KB)

Examples in GNU/Linux with KDE, on bar selected:

BeforeAfter
BEFORE_bar_selected.png (859×585 px, 149 KB)
AFTER_bar_selected.png (859×585 px, 150 KB)

[This is a follow-up task for Q63.]

Revisions and Commits

Event Timeline

valerio.bozzolan assigned this task to matmarex.

Thanks again. Let's see if we receive some feedback from users in master branch