Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
KiddoV opened this issue Feb 15, 2024 · 2 comments
Labels
browser/chromium Any issues relating to Chromium (Chrome, Edge (new), Opera, Brave etc.) tag/next-release/nightly Any issue which has a corresponding PR which has been merged and is available in the nightly build type/bug Any issue which is a bug or PR which fixes a bug
Milestone

Comments

@KiddoV
Copy link
Contributor

KiddoV commented Feb 15, 2024

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)

err

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 KiddoV added state/awaiting-investigation Anything which needs more investigation state/awaiting-triage Any issues or pull requests which haven't yet been triaged type/bug Any issue which is a bug or PR which fixes a bug labels Feb 15, 2024
@KiddoV
Copy link
Contributor Author

KiddoV commented Feb 15, 2024

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
Copy link
Member

Fixed by #3010

@lubber-de lubber-de added browser/chromium Any issues relating to Chromium (Chrome, Edge (new), Opera, Brave etc.) state/has-pr An issue which has a related PR open and removed state/awaiting-investigation Anything which needs more investigation state/awaiting-triage Any issues or pull requests which haven't yet been triaged labels Mar 2, 2024
@lubber-de lubber-de added this to the 2.9.4 milestone Mar 2, 2024
@lubber-de lubber-de added tag/next-release/nightly Any issue which has a corresponding PR which has been merged and is available in the nightly build and removed state/has-pr An issue which has a related PR open labels Mar 15, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
browser/chromium Any issues relating to Chromium (Chrome, Edge (new), Opera, Brave etc.) tag/next-release/nightly Any issue which has a corresponding PR which has been merged and is available in the nightly build type/bug Any issue which is a bug or PR which fixes a bug
Projects
None yet
Development

No branches or pull requests

2 participants