Scroll bars are fat again on the newer Chrome versions?

[hellt]

Hey all,
I noticed that for quite some time now the scroll bars on Chrome browser got fatty again.
mkdocs-material applies scrollbar stylings for webkit browsers, but it seems whilst safari still respects them, Chrome doesn't anymore.

I wonder if it is possible to fix it.

Chrome Version 121.0.6167.85 (Official Build) (arm64)

Safari Version 17.3 (18617.2.4.11.9, 18617)

[kamilkrzyskow]

Hello @hellt,
it seems to be a Chrome 121 issue, you could try to use the answer here with custom CSS:
https://stackoverflow.com/questions/77919700/scrollbars-chrome-update-121

I think it's fixable in the general sense, so if you want to have it fixed without the custom CSS, then please create a bug report issue.

[hellt]

I am light on css/scss and just adding

@supports not selector(::-webkit-scrollbar) {
  html {
    scrollbar-width: thin;
    scrollbar-color: var(--thumb-color) var(--track-color);
  }
}

in my extra CSS file didn't fix the issue. I am fine with a workaround, so if anyone gets to digesting the correct CSS blob I'd appreciate a hint.

[kamilkrzyskow]

I'm sorry @hellt,
I didn't realize this was so tricky 😓The answer on stack is rather specific to their own setup with the html and --thumb-color variables.
I had to read Google blog post to get a clearer picture, but it still took some trial and error. This is the CSS that seems to work with my Chromium 121:

old fix

/* First unset all rules that break Chrome styling */
.md-typeset pre > code {
    scrollbar-color: unset;
    scrollbar-width: unset;
}
.md-typeset pre > code:hover {
    scrollbar-color: unset;
}

/* Wrap new scrollbar properties in @supports rule for browsers without `::-webkit-scrollbar-*` support */
/* This way Chrome won't override `::-webkit-scrollbar-*` selectors */
/* https://developer.chrome.com/docs/css-ui/scrollbar-styling */
@supports not selector(::-webkit-scrollbar) {
    .md-typeset pre > code {
        scrollbar-color: var(--md-default-fg-color--lighter) #0000;
        scrollbar-width: thin;
    }
    .md-typeset pre > code:hover {
        scrollbar-color: var(--md-accent-fg-color) #0000;
    }
}

/* Restore hover color for Chrome */
@supports selector(::-webkit-scrollbar) {
    .md-typeset pre > code:hover::-webkit-scrollbar-thumb {
        background-color: var(--md-accent-fg-color);
    }
}

[hellt]

thanks @kamilkrzyskow
this seemed to fix the horizontal scroll bar, but the vertical (rightmost on the screenshot) one stayed thick

[kamilkrzyskow]

Well, true, as I only fixed it for pre > code... now while checking the other possible selectors, I found a @supports selector(::-webkit-scrollbar) in the minified CSS, so this means that squidfunk made similar fixes in the past. Therefore a bug report would definitely be reasonable.

Fixed fix

/* First unset all rules that break Chrome styling */
.md-typeset pre > code,
.md-search__scrollwrap,
.md-sidebar__scrollwrap {
    scrollbar-color: unset;
    scrollbar-width: unset;
}
.md-typeset pre > code:hover,
.md-search__scrollwrap:hover,
.md-sidebar__scrollwrap:focus-within,
.md-sidebar__scrollwrap:hover {
    scrollbar-color: unset;
}
.md-tooltip2__inner {
    scrollbar-width: unset;
}

/* Wrap new scrollbar properties in @supports rule for browsers without `::-webkit-scrollbar-*` support */
/* This way chrome won't override `::-webkit-scrollbar-*` selectors */
/* https://developer.chrome.com/docs/css-ui/scrollbar-styling */
@supports not selector(::-webkit-scrollbar) {
    .md-typeset pre > code,
    .md-search__scrollwrap,
    .md-sidebar__scrollwrap {
        scrollbar-color: var(--md-default-fg-color--lighter) #0000;
        scrollbar-width: thin;
    }
    .md-typeset pre > code:hover,
    .md-search__scrollwrap:hover,
    .md-sidebar__scrollwrap:focus-within,
    .md-sidebar__scrollwrap:hover {
        scrollbar-color: var(--md-accent-fg-color) #0000;
    }
    .md-tooltip2__inner {
        scrollbar-width: thin;
    }
}

/* Restore hover color for Chrome */
@supports selector(::-webkit-scrollbar) {
    .md-typeset pre > code:hover::-webkit-scrollbar-thumb,
    .md-search__scrollwrap:hover::-webkit-scrollbar-thumb,
    .md-sidebar__scrollwrap:focus-within::-webkit-scrollbar-thumb,
    .md-sidebar__scrollwrap:hover::-webkit-scrollbar-thumb {
        background-color: var(--md-accent-fg-color);
    }
}

I hope, I didn't miss anything this time ✌️

[squidfunk]

We should switch to the scrollbar-* properties, keeping the old ::-webkit-scrollbar selectors for a short while. Since Chrome is evergreen, we can expect it to increase in usage share quite fast. Looking at the selectors, excerpt for .md-typeset pre > code, all of them are controlled by us, so we should introduce a new CSS class that explicitly sets the scrollbar properties to reduce duplication. If somebody wants to create a PR for this, it would be greatly appreciated! So, to sum up:

1. Add new .md-scrollable class with scrollbar-* and ::-webkit-scrollbar styles
2. Add the md-scrollable class to the relevant templates/selectors
3. Remove sprinkled definitions of ::-webkit-scrollbar

Have I forgotten anything?

[squidfunk]

I don't think we should opt for the old behavior btw., because scrollbar-* is the standard and the future. If somebody wants to add back the old styles, the CSS posted by @kamilkrzyskow is the way to go 🚀

[kamilkrzyskow]

I'll mark the extra css as the answer for the time being. It assumes that thet Material theme still sets all of the other ::webkit selectors, the fix only unsets the now preferred properties and locks them to browsers not supporting ::webkit.
So once the .md-scrollable change gets pushed, then the custom CSS will have to be expanded.
I use Firefox, so I never saw the slim Chrome scrollbars, and it's sad that the thin is the thinnest it can going forward.

[hellt]

@kamilkrzyskow and it seems the window scrollbar (that does not belong to any of the elements) can not be currently styled to be the same thin bar as your fix did for code blocks?