Scrollbars Chrome update 121

Question

Chrome just launched update 121 a few days ago and I just noticed the scrollbars on my websites look like this ugly scrollbar while they used to look like this cool scrollbar with rounded corners

Is there a way to fix it ?

Answer 1

Chrome now prefers the new scollbar properties — scrollbar-color and scrollbar-width over the -webkit-* selectors which are used to style scrollbars. I too experienced this after upgrading to chrome 121 and I have documented my case here https://syntackle.com/blog/changes-to-scrollbar-styling-in-chrome-121/. But a quick fix would be to wrap the new properties in a @supports rule check for browsers which don't support webkit selectors, example firefox.

/* Wrap new scrollbar properties in @supports rule for browsers without `::-webkit-scrollbar-*` support */
/* This way chrome won't override `::-webkit-scrollbar-*` selectors */
@supports not selector(::-webkit-scrollbar) {
  html {
      scrollbar-width: thin;
      scrollbar-color: var(--thumb-color) var(--track-color);
  }
}

Answer 2

If you experience this too it might be because you have two ways of styling CSS : one for chrome and one for firefox :

/* FIREFOX */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
}

/* CHROME */
::-webkit-scrollbar {
  width: 0.5rem;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 30px;
}

To fix it you just have to move your Firefox specific CSS inside a @-moz-document url-prefix() bloc like this :

/* FIREFOX */
@-moz-document url-prefix() {
  * {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
  }
}

The Chrome patchnote here says they added support for scrollbar-color and scrollbar-width but it seems that these properties cancel the old ones. That wouldn't be a problem if there was only color and width, but I had other ones like border-radius that don't seem to get a replacement.

You can try with this snippet in chrome and firefox :

/* FIREFOX */
@-moz-document url-prefix() {
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
  }
}

/* CHROME */
::-webkit-scrollbar {
  width: 0.5rem;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 30px;
}

<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>