css Question posted in
Some basic documentation can be found here.

Css – Scrollbars Chrome update 121

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 ?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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.


  2. 0

    God, I thought it’s only something wrong with my installed version. It’s an ugly update. Only happening in windows based machines.
    I just removed this : scrollbar-width: thin; and all good now

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search