Bug 8115 - Some desktop browsers show scrollbars that doesn't fit our graphical style
Summary: Some desktop browsers show scrollbars that doesn't fit our graphical style
Status: NEW
Alias: None
Product: ThinLinc
Classification: Unclassified
Component: Other (show other bugs)
Version: trunk
Hardware: PC Unknown
: P2 Normal
Target Milestone: LowPrio
Assignee: Bugzilla mail exporter
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2023-03-09 12:55 CET by Samuel Mannehed
Modified: 2023-03-17 18:40 CET (History)
1 user (show)

See Also:
Acceptance Criteria:

Attachments
Screenshot of how scrollbars look in Chrome on Fedora (106.20 KB, image/png)
2023-03-09 12:55 CET, Samuel Mannehed 		Details
Screenshot of how custom scrollbars could look (84.55 KB, image/png)
2023-03-10 16:58 CET, Samuel Mannehed 		Details
View All Add an attachment (proposed patch, testcase, etc.)

Description Samuel Mannehed cendio 2023-03-09 12:55:24 CET 
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:
 * https://www.google.com
 * https://www.reddit.com
 * https://www.facebook.com
 * https://jenkins.lkpg.cendio.se

Examples that use custom scrollbars:
 * https://www.youtube.com
 * https://app.slack.com/client
 * https://discord.com
 * https://open.spotify.com

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.
Comment 1 Samuel Mannehed cendio 2023-03-10 16:58:01 CET 
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.
Comment 2 Samuel Mannehed cendio 2023-03-17 18:40:40 CET 
Another issue that this bug could solve is the fact that <select> element scrollbars sometimes clip the rounded corners.
Note You need to log in before you can comment on or make changes to this bug.