[Skeleton v2] - Light scrollbar is displayed instead of dark one on Opera browser

[laszlo1337]

Current Behavior

Opera browser (and possibly other chromium based browsers) shows light scrollbar in dark mode themes.

Expected Behavior

Should show dark scrollbar as before.

Steps To Reproduce

1. Using Opera One(version: 107.0.5045.36)
2. Start skeleton project with darker theme (in my case Vintage)

Link to Reproduction / Stackblitz

No response

More Information

Skeleton v: 2.9.0 As discussed, the issue could be related to recent Chromium engine update

EDIT: proposed solution does no have effect:

:root {
	scrollbar-color: rgba(0,0,0, 1) rgba(0, 0, 0, 0.1); /* thumb / track */
	scrollbar-width: thin;
}

Results in:

[endigo9740]

Thank you for reporting, we'll aim to review asap!

[Typogram]

Was looking at the scrollbar issue and potentially I found the culprit.
Right now in Chrome on Windows I have the square scroll bar with increment and decrement buttons

Reset scrollbar-color from any color configuration to auto: html { scrollbar-color: auto !important; }

It seems Chrome 121 has introduced "scrollbar-width, scrollbar-color" properties. Having them present in styles file makes "-webkit-scrollbar" properties irrelevant.

It restored styled, thin rounded corner scrollbar:

I thought maybe it is related to this reported issue and could help

[laszlo1337]

@Typogram this definitely did work! thanks for the solution ❤

[jwatts777]

Adding Typogram's solution works for a fresh install, and the docs site also suffers from this issue. While working on other things in repo, I found adding the above to main docs site postcss is a quick fix.

[endigo9740]

@laszlo1337 sorry it's taken us a bit to get back to this. I think going forward, rather than trying to fight with the vendor-specific prefixes we just go all in on the new standard, which is now supported by most browsers. This is the exact approach we're using in Skeleton v3 and forward:

• https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color
• https://developer.chrome.com/docs/css-ui/scrollbar-styling

Here's the PR with the pending change if you would like to compare the before/after:

• https://github.com/skeletonlabs/skeleton/pull/2596

However, myself and the Skeleton team are having trouble replicating your issue. In most browsers we've tested the new standard styles appear identical to the vendor prefixed iteration. As such, we think your issue might be a specific combination of Opera plus whatever operating system you're using.

Out of curiosity, would you mind viewing this preview URL to check the display of the scrollbars: https://skeleton-docs-git-bugfix-scrollbar-display-issue-skeleton-labs.vercel.app/

Compare this to the current production site - which is still running the vendor prefixed styles: https://www.skeleton.dev/

If possible, screenshots of both would be welcome here!

[jwatts777]

@endigo9740 On Windows 10 Home Chrome (Dark mode) Version: 123.0.6312.106 Preview: Current Prod:

[endigo9740]

Thanks Jordon, just for the record we've tested the following browsers:

• MacOS:
  • Chrome
  • Firefox
  • Safari
• Windows:
  • Chrome
  • Firefox
  • Edge
  • Brave
  • Opera
• Android: Chrome
• iOS: Mobile Safari

The only outlier so far is Safari (on MacOS). It doesn't seem to adhere to the new standards and will fallback to unstyled scrollbars for now. We're not going to lose any sleep over this though. Safari will catch up eventually...like they always do!