Scrollbar styling with ::-webkit-scrollbar stopped working in chrome after latest chrome 121 update

Question

I have found that explanation "In Chrome 121, support was added for scrollbar-color and scrollbar-width. If some of these properties are used, then ::-webkit-scrollbar won't work." However it hasn't solves the problem for me. I style scrollbar in scss changing its border radius, width and color.

.scroll-themed {
  @include themify($themes) {
    // scrollbar-color: themed('colorText') transparent;
  }
  // scrollbar-width: thin;
  ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
    background-color: transparent;
  }
  ::-webkit-scrollbar-thumb {
    @include themify($themes) {
      border: 1px solid themed('colorBackgroundBody');
      background-color: themed('colorText') !important;
    }
    border-radius: 15px;
  }
  ::-webkit-scrollbar-corner {
    background-color: transparent;
  }
  ::-webkit-scrollbar-button:vertical:start:decrement {
    background-color: transparent !important;
    height: 67px;
  }
}

I tried to fix it by removing all scrollbar-color and scrollbar-width usages in my project but it didn't help

Answer 1

I had a script that was setting scrollbar-color in index.html, I hadn't noticed it initially because I was only searching in styles

bodyElement.parentElement.style.scrollbarColor = scrollbarColor;

using scrollbar-color or scrollbar-width anywhere is indeed disabling webkit styles for scrollbar. Making it only for firefox fixed the issue.

const isFirefox = navigator.userAgent.toLowerCase().includes('firefox');
if (isFirefox) {
    bodyElement.parentElement.style.scrollbarColor = scrollbarColor;
}