Scrollbar customizations cause bug in Chrome on macOS

[michenriksen]

Current Behavior

The customizations done to the scrollbar in core.css causes the scrollbar “track” to always be visible and take up space from the content, instead of floating on top/overlay the content, inside elements with a defined height and overflow-y-auto.

As an example, I have taken the sticky position demo code from Tailwind's documentation and put it in a JSFiddle with Tailwind loaded: https://jsfiddle.net/x2vq8skn/

Notice how the scrollbar floats nicely on top/overlays the content on macOS Chrome:

If I generate a new Skeleton project and copy-paste the same demo code into +page.svelte, the scrollbar area is permanently visible, creating an ugly gap instead of overlaying the content:

Reproduction / Steps To Reproduce

1. Generate a new Skeleton app with npm create skeleton-app@latest my-skeleton-app with default options.
2. Open src/routes/+page.svelte and replace content with HTML code from https://jsfiddle.net/x2vq8skn/
3. Run npm run dev and open the dev URL in Chrome on macOS. Notice that the scrollbar customizations cause the scrollbar area to always be visible instead of overlaying the content like in the JSFiddle demonstration.

Anything else?

I am aware that this issue has been reported and closed as wont-fix; however, I'm opening this issue hoping you will reconsider your wont-fix decision. I think it looks awful, and could possibly be a show-stopper for many with the current behavior.

The workaround mentioned in #1304 unfortunately doesn't work.

I'm sure there is a good reason you introduced the scrollbar customizations, so maybe @hackape's proposal to make it opt-in is a viable solution? If it's possible, having a .no-scrollbar-customization to add to elements when needed would also be a nice way to handle it!

[hackape]

FYI, my current workaround is to roll my own all.css. Since the scrollbar related bits are in core.css, just need to comment out those lines.

/* Tailwind Directives */
@import 'tailwind.css';

/* Global Styles */
/* @import 'core.css'; */
@layer base {
	/* === Body Styles === */

	body {
		@apply bg-surface-50-900-token;
	}

	/* === Selection === */

	::selection {
		@apply bg-primary-500/30;
	}

	/* === Focus === */

	/* Outline (do not change) */
	/* http://www.outlinenone.com/ */

	/* Mobile tap highlight */
	/* https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color */
	html {
		-webkit-tap-highlight-color: rgba(128, 128, 128, 0.5);
	}

	/* === Scrollbars === */
/*
	::-webkit-scrollbar {
		@apply w-2;
	}
	::-webkit-scrollbar-track {
		@apply !bg-surface-50-900-token px-[1px];
	}
	::-webkit-scrollbar-thumb {
		@apply rounded-token bg-surface-400-500-token;
	}
*/

	/* Firefox */
	/* https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color#browser_compatibility */
/*	html {
		scrollbar-color: rgba(0, 0, 0, 0.2) rgba(255, 255, 255, 0.05);
	}
	html.dark {
		scrollbar-color: rgba(255, 255, 255, 0.1) rgba(0, 0, 0, 0.05);
	}
*/
	/* Hide Scrollbars */
	.hide-scrollbar::-webkit-scrollbar {
		display: none;
	}
	.hide-scrollbar {
		-ms-overflow-style: none; /* IE/Edge */
		scrollbar-width: none; /* Firefox */
	}

	/* === Horizontal Rules === */

	hr:not(.divider) {
		@apply block border-t border-solid border-surface-300-600-token;
	}
	.divider-vertical {
		@apply inline-block border-l border-solid border-surface-300-600-token min-h-[10px] mx-auto;
	}
}

/* Typographical Settings */
@import 'typography.css';

/* Imports all Tailwind Elements */
@import 'elements.css';

/* Imports all Variant Styles */
@import 'variants.css';

[rairulyle]

Agree with what you have said. I personally don't like the extra space it takes on mobile and tablet, it's not a good UI/UX since it's taking a space on a small screen. On my case I just want the scrollbar style to be applied on large screens:

My own all.css

/* Tailwind Directives */
@import '@skeletonlabs/skeleton/styles/tailwind.css';

/* Global Styles */
@import 'core.postcss';

/* Typographical Settings */
@import '@skeletonlabs/skeleton/styles/typography.css';

/* Imports all Tailwind Elements */
@import '@skeletonlabs/skeleton/styles/elements.css';

/* Imports all Variant Styles */
@import '@skeletonlabs/skeleton/styles/variants.css';

Modified core.css

	/* === Scrollbars === */

	::-webkit-scrollbar {
		@apply lg:w-2;
	}
	::-webkit-scrollbar-track {
		@apply lg:px-[1px] lg:!bg-surface-50-900-token;
	}
	::-webkit-scrollbar-thumb {
		@apply lg:bg-surface-400-500-token lg:rounded-token;
	}

[endigo9740]

We've hit the cut off for new additions per THIS release cycle and the new release dropping tomorrow. However I will plan to circle back to this request in the next release cycle. We're slowly moving most if not all default styling to be opt-in for Skeleton, so this is a likely change going forward. I'll review your suggestions when we get to this point. Thanks!

[endigo9740]

Here's where I've fallen on this one. I think the default styles are beneficial for your average user. One of Skeleton's goal is ease of use, so we do try to implement some opinionated features like this out of the box.

If I generate a new Skeleton project and copy-paste the same demo code into +page.svelte, the scrollbar area is permanently visible, creating an ugly gap instead of overlaying the content:

What you refer to as a "gap" is just the background of the app and the background of the scrollbar being the same color. You could always customize those by modifying the existing CSS styles in your app.postcss file. Likewise I'd gladly accept a PR that provides better default styling if anyone thinks they can do better. You can see current styles are implemented here:
https://github.com/skeletonlabs/skeleton/blob/dev/src/lib/styles/core.css#L27

Going further though - we will be introducing a notable change as part of this PR that may be relevant here:

• Opt-In Typography Styles #1189
• Improve Typography System #1374

While this PR focusses on typography options, one of the changes being introducing is replacing all.css with two new options. Rather than having one single version that forces everything on, we'll be providing a forked path:

1. skeleton.css - this is 1:1 with all.css, except it now imports the opt-in version of the typography.css stylesheet
2. skeleton-minimal.css - this provides only REQUIRED stylesheets, leaving off core.css entirely.

If you're a power user that does not wish to use our opinionated global styles, but want the benefits of everything else (elements, opt-in typography, etc), then this what you're going to want to use. You can view the differences here:
https://github.com/skeletonlabs/skeleton/tree/feat/opt-in-typography/src/lib/styles

I still need to work up the documentation that explains this new option. But I wanted to give you all a heads up, as you seem like the target audience of this change. If you have any feedback on this change, please provide it either in the PR or typography thread please.

Hope this helps!

[endigo9740]

Given the Typography branch I mention above was fixed, we'll consider this fix in queue for next week's release. See my notes above if you wish to implement this then. Thanks!

[cmjoseph07]

@endigo9740 I tried importing 'skeleton-minimal.css' in an attempt to alleviate the bug but I got an error Cannot find module '@skeletonlabs/skeleton/styles/skeleton-minimal.css'.

I tried to do the work around of making my own all.css file but I still get the messed up scrollbars.

[endigo9740]

@cmjoseph07 those changes are not yet live. If you would like to test this in your project we provide guidance for creating and installing a tarball version of the package here:
https://github.com/skeletonlabs/skeleton/wiki/Create-and-Install-Test-Packages

You would want to do that against our dev branch. However if that sounds like too much, then you can test these changes when they go live as part of the new release on Tuesday of next week.

[cmjoseph07]

@endigo9740 OHHHHHHH, I see now. Yeah that was me being dumb. I will wait for the release as it isn't a rush, thank you so much for getting back to me on this.

[AhsanSarwar45]

@endigo9740 How can importing skeleton-minimal.css be achieved now in v2, given that the migration guide asks us to remove the skeleton.css import?

[Sarenor]

@AhsanSarwar45 probably better to open a new issue or a support thread in discord for that that references this issue

[iamdimitar]

Please don't style the scrollbars.

[WojtekMR3]

Wish there was some way to stylize a custom scrollbar.