ionic-framework: Cannot style scrollbar on chrome
Bug Report
Ionic version:
[x] 4.x
Current behavior:
CSS cannot be applied to style component overflow scrollbar appearance.
This leads to scrollbars for PWAs that cannot be styled to match the theme of the application:
Expected behavior: We should be able to style scrollbars using CSS. https://css-tricks.com/custom-scrollbars-in-webkit/
Steps to reproduce: Just display any starter app in a web browser (not in mobile emulation mode), and resize the window to cause overflow. The scrollbar will appear and cannot be re-styled.
Related code:
The following CSS should style ALL scrollbars in the application. I’ve tried a variety of permutations of this to no avail.
:root * {
&::-webkit-scrollbar {
width: 12px;
}
&::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
}
&::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(255, 0, 0, 0.8);
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
&::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255, 0, 0, 0.4);
}
}
https://stackblitz.com/edit/ionic-v4-z4czrb?file=src%2Fglobal.scss
Other information: This issue has been alluded to or reported in the incorrect place a number of times. Here are a few:
https://github.com/ionic-team/ionic-v3/issues/737 https://github.com/ionic-team/ionic/issues/17608
Ionic info:
Lincolns-MacBook-Pro-2:topdecked-unified lincoln$ ionic info
Ionic:
ionic (Ionic CLI) : 4.10.2 (/usr/local/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 4.0.2
@angular-devkit/build-angular : 0.13.1
@angular-devkit/schematics : 7.3.1
@angular/cli : 7.3.1
@ionic/angular-toolkit : 1.3.0
Cordova:
cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
Cordova Platforms : not available
Cordova Plugins : not available
System:
Android SDK Tools : 26.1.1 (/usr/local/share/android-sdk)
ios-deploy : 1.9.4
NodeJS : v11.2.0 (/usr/local/Cellar/node/11.2.0/bin/node)
npm : 6.4.1
OS : macOS Mojave
Xcode : Xcode 10.1 Build version 10B61
About this issue
- Original URL
- State: closed
- Created 5 years ago
- Reactions: 7
- Comments: 30 (1 by maintainers)
Thanks for the issue! After discussion with the team, we have decided not to support this functionality.
The CSS that is used to style scrollbars is non-standard and not cross browser compatible. MDN says that it should not be used in production sites: https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar
Since this CSS is non-standard, its behavior may change unexpectedly in the future or be removed entirely. In 2019 we started to see this happen with the introduction of iOS 13. Scrollbar styling used to work in certain contexts on Safari, but as of today it no longer works.
Additionally, because this CSS is not cross browser compatible, it will not work in non-WebKit browsers such as Firefox.
For developers that still would like to use custom scrollbars, I have created a CodePen with a workaround: https://codepen.io/liamdebeasi/pen/QWbEbpO. Please note that this code may break in the future due to the reasons I listed previously.
Any progress on this issue, Ionic?
I looked all over and there is no real solution to this UGLY problem. Although on Mac scrollbars are thin and transparent and look ok. But look in chrome on windows is horrendous. I have 2 sidebars in my PWA and pretty complex navigation. I solved everything else (including split-pane behaviour which is too much mobile-centric), but can’t find solution to this. Please look into that issue.
Any update on this?
Because of web components we are unable to style scrollbars… It’s really sad and frustration for not being able to achieve a workaround or something. I’m seeing same old ugly OS based scrollbars in my ionic web app.
It’s unbelievable that this tiny feature is missing from this popular framework.
@liamdebeasi Actually I think it would be useful for all Ionic / Stencil components that use Shadow DOM. It would really allow much greater control in situations that demand it (obviously not something to “encourage” for most users. Which is a risk, I realize, in exposing such a feature.)
@liamdebeasi No problem. Thanks for the workaround 😃
So annoying!
Shadow root is great and all, but I think maybe the best option for handling this would be a toggle to disable use of the shadow root for the ion-content component. That way we could style whatever we need without worrying about adding a million options to this component.
Another thing that would help for those of us that are trying to do this, is a “pre-render” callback on the component that lets us inject our own styles into the shadow dom without “hacking in”.
a clue here - using the shadowRoot? - https://github.com/ionic-team/ionic-v3/issues/737 (macchie commented on Aug 7)
我也遇到了类似问题，希望尽快解决
@brandyscarney Hey! Sorry to bug you. If you or one of the other devs could take a moment to let us know how you’d like this fixed, and where to start in the sources, I’d take a stab and sending a PR for this. This is a big blocker for us.
I tried hacking the distribution component css files directly to get things working, but apparently, I wasn’t looking in the right place or changing the right things.
Much appreciated. Thanks!
I am also facing the same issue. I see this issue is still open can you please look into that