postcss-scrollbar
postcss-scrollbar copied to clipboard
Matching Firefox and Webkit styles
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 to11px
. Currently postcss-scrollbar is translating it to.5rem
, which for when the root font-size is16px
it ends up as8px
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 be16px
. -
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
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.
-
I'm inclined to think we should not force any styling for MacOS, provided the OS style (rounded, transparent, disappearing) is applied.
-
There's no solution I'm aware of to find the value of
thin
, since this will vary for every system, window-manager, etc. So0.5rem
was quite random, but at least looked fine in Gnome :) I set it inrem
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.
@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:
- 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.
- When scrolling: Hide scroll bars until you start scrolling.
- 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.
Regardless I'd go with a fixed length instead of
rem
so it's not influenced by what the rootfont-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...