search

pascalduez / postcss-scrollbar

PostCSS plugin enabling custom scrollbars
The Unlicense
74 stars 3 forks source link

Matching Firefox and Webkit styles #4

Open philipbordallo opened 5 years ago

philipbordallo commented 5 years ago

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?

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

pascalduez commented 5 years ago

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):

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

I'll keep you posted.

philipbordallo commented 5 years ago

@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 commented 5 years ago

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...