Thin scrollbars for Firefox

[Nekzuris]

Since Firefox doesn't use ::-webkit-, we should use scrollbar-width: thin to better match the style on Chrome.
This doesn't override other scrollbar-width: none

Chrome scrollbars:

Firefox scrollbars:

Firefox with thin scrollbars:

Also I’m quite sure the rule body { scrollbar-width: 10px; } doesn’t do anything because it’s unsupported and should be deleted.

[1ec5]

This documentation says @document is deprecated and the prefixed version no longer works in author-defined stylesheets. Can we count on it to work on Firefox going forward?

[Nekzuris]

I'm not sure, the browser compatibility table says it is supported for Firefox browser detection.

Maybe I'm missing something, but I don't see any other way. If we set scrollbar-width: thin; for everyone, I don't think we can override it with ::-webkit-scrollbar.

[1ec5]

I see, is the intention to avoid clobbering the width here with whatever WebKit would use as thin in its (currently experimental) implementation?

iD/css/80_app.css

Lines 5749 to 5754 in d04c3cd

	::-webkit-scrollbar {
	height: 10px;
	overflow: visible;
	width: 10px;
	border-left: 1px solid #DDD;
	}

I suppose this specific url-prefix hack does still work, so it’s an improvement over the status quo.

[Nekzuris]

Yes, I think the current WebKit scrollbar looks better, especially with the rounded borders, but I couldn’t find any way to achieve the same on Firefox.

[1ec5]

Thanks for this contribution. As a longtime Firefox user, I had no idea the scrollbars were supposed to be thin!

[1ec5]

I see, is the intention to avoid clobbering the width here with whatever WebKit would use as thin in its (currently experimental) implementation?

iD/css/80_app.css

Lines 5749 to 5754 in d04c3cd

	::-webkit-scrollbar {
	height: 10px;
	overflow: visible;
	width: 10px;
	border-left: 1px solid #DDD;
	}

I suppose this specific url-prefix hack does still work, so it’s an improvement over the status quo.