Created attachment 1108 [details]
Screenshot of how scrollbars look in Chrome on Fedora
Desktop versions of Google Chrome and Microsoft Edge are examples of browsers that always show scrollbars on items with scroll. Safari and Firefox hide their scrollbars until the user hovers the element or starts scrolling. All mobile browsers also automatically hide scrollbars.
As part of bug 7908 and bug 7909 we are getting a more consistent look across Web Admin and Web Access. The scrollbars that are shown in desktop Chrome and Edge are rendered by the browsers and don't fit in well with the rest of our GUI.
The scrollbars shown in Safari and Firefox don't really use our colors, but it's a lesser issue since they automatically hide.
It is possible to style scrollbars using CSS. The question we need to ask ourselves here is, do we consider the scrollbars part of the browser GUI or part of the website? I looked at different popular sites for examples.
Examples using the built in scrollbars:
Examples that use custom scrollbars:
There appears to be a bit of a theme that sites that behave more like “web apps” always seem to use custom scrollbars for them to fit into the overall experience. More classic websites tend to use built in scrollbars.
Created attachment 1109 [details]
Screenshot of how custom scrollbars could look
Here's custom scrollbars that, even in Chrome take on an "overlay" style and use our colors and border-radius. These were created using ::-webkit-scrollbar.
Note that Firefox doesn't support that method. However, Firefox allows changing colors using the "scrollbar-color" property and the size using the "scrollbar-width" property. This means it is possible to achieve an almost identical look across all browsers.
Another issue that this bug could solve is the fact that <select> element scrollbars sometimes clip the rounded corners.