Matching Firefox and Webkit styles

[philipbordallo]

Currently the transformed Webkit scrollbar styles are very basic and do not match what's rendered in Firefox. Does it make sense to try and match the styles that occur in Firefox to Webkit?

• At least with Firefox on macOS, scrollbar-width: thin renders to 11px. Currently postcss-scrollbar is translating it to .5rem, which for when the root font-size is 16px it ends up as 8px but because it's using rem it is affected by whatever that root font-size is. For example, font-size: 32px means the scrollbars would be 16px.

• Again on macOS, Firefox gives the thumb a border-radius and some spacing that can be replicated using borders and border-radius, it's not perfect but it's doable.

Here's pen of what's possible: https://codepen.io/philipbordallo/pen/mvevry

[pascalduez]

Hi @philipbordallo,

thanks a lot for the feedback and research! Obviously I didn't tested it on MacOS, but a couple of days ago I saw the result, and it's looking pretty shitty.

1. I'm inclined to think we should not force any styling for MacOS, provided the OS style (rounded, transparent, disappearing) is applied.

2. There's no solution I'm aware of to find the value of thin, since this will vary for every system, window-manager, etc. So 0.5rem was quite random, but at least looked fine in Gnome :) I set it in rem thinking it should follow zooming or user preferences, but obviously might not be optimal, at least it should have a max value.

So to narrow the scope if this plugin I would say it should (if possible):

• Apply the exact same style for Firefox, Chrome and Webkit on Linux, Windows, and leave MacOS alone.
• Maybe make the value of thin configurable through an option. But this becomes kind of opinionated and subject to design decisions, so hard to cast into a plugin.

I'll run some more testing this week on MacOs and some another round of research.

I'll keep you posted.

[philipbordallo]

@pascalduez That's what I was assuming, that being consistent across multiple operating systems is going be tough.

macOS Styles

macOS scrollbars do not always disappear, it depends on what scrollbar setting the user has. The three mode settings for showing scrollbars are:

1. Automatically based on mouse or trackpad: Scroll bars are shown depending on the mouse or trackpad you’re using. If your device allows gestures, scroll bars are hidden until you start scrolling. Otherwise, they’re visible.
2. When scrolling: Hide scroll bars until you start scrolling.
3. Always: Scroll bars are always shown.

If there is no style given, Safari, Chrome, and Firefox all act pretty consistently:

Browser	Setting	Visibility	Description
Safari	1, 2	Hidden When Not Active	Semi-transparent, rounded scrollbars, color based on document background-color
Chrome	1, 2	Hidden When Not Active	Semi-transparent, rounded scrollbars, color based on document background-color
Firefox	1, 2	Hidden When Not Active	Semi-transparent, rounded scrollbars, color based on document background-color
Safari	3	Always visible	Gray and white, rounded scrollbars
Chrome	3	Always visible	Gray and white, rounded scrollbars
Firefox	3	Always visible	Gray and white, rounded scrollbars

With styles given things get a bit different:

Browser	Styled Applied?	Setting	Visibility	Description
Safari	✅	1, 2, 3	Always visible	Styled scrollbars with no rounded corners
Chrome	✅	1, 2, 3	Always visible	Styled scrollbars with no rounded corners
Firefox	❌	1, 2	Hidden When Not Active	Semi-transparent, rounded scrollbars, color based on document background-color (same as no style version)
Firefox	✅	3	Always visible	Styled, rounded scrollbars

Thin Sizing

I just took a screenshot of the Firefox version and measured the pixels, which ended up being 11px for macOS. It might be a good idea to collect measurements across different operating systems and pick a length based on that list.

Regardless I'd go with a fixed length instead of rem so it's not influenced by what the root font-size is.

[pascalduez]

Regardless I'd go with a fixed length instead of rem so it's not influenced by what the root font-size is.

Agree, I will do that.

Let's use this little pen to grab the thin scrollbar size. https://codepen.io/anon/pen/ZwVVBw

Results:
Linux (Gnome) :  6px

Linux (Ubuntu Gnome)
UA Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:65.0) Gecko/20100101 Firefox/65.0 --> 6px

Windows 10
UA Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:65.0) Gecko/20100101 Firefox/65.0 --> 8px

TBC...