[Scrollbar] CSS style for Firefox scrollbar break the scrollbar on chromium browser (Chrome/ Edge)

[KiddoV]

Bug Report

For some reason when I update to the new version of the these browser: Chrome: v121.0.6167.184 (Official Build) (64-bit) Edge: v121.0.2277.112 (Official build) (64-bit) Custom scrollbar break and use default scrollbar instead.

See image below:

Screenshot (if possible)

As you can see when I turn off scrollbar-color: rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0.1); and scrollbar-width: thin;, the custom scrollbar displayed, but keeping those CSS will break the custom scrollbar.

Library source code where the bug is present: https://github.com/fomantic/Fomantic-UI/blob/6daf34d16395f8aa9b964719095c775fc8e4e95b/dist/semantic.css#L664-L673

body .ui {
  /* IE11 */
  scrollbar-face-color: #bfbfbf;
  scrollbar-shadow-color: #bfbfbf;
  scrollbar-track-color: #e6e6e6;
  scrollbar-arrow-color: #e6e6e6;
  /* firefox: first color thumb, second track */
  scrollbar-color: rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0.1);
  scrollbar-width: thin;
}

My temporary solution:

body .ui {
    /* Override scrollbar-color */
    scrollbar-color: auto; /* Use browser default colors */
    /* Override scrollbar-width */
    scrollbar-width: auto; /* Use browser default width */
}

Version

v2.9.3

[KiddoV]

Additional comment: Chromium 120 and earlier version not support scrollbar-color and scrollbar-width, version 121 now supported: https://caniuse.com/?search=scrollbar-color

[lubber-de]

Fixed by #3010