Ionic-framework: Cannot style scrollbar on chrome

[lincolnthree]

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 ([email protected])
   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

[LakshanKarunathilake]

I am also facing the same issue. I see this issue is still open can you please look into that

[IvanMurabito]

same issue here...im not able to change the style of scrollbar.

[lincolnthree]

I still have not found any solution or workaround for this, other than not using Ionic.

[rokkapun]

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.

[ldittel]

The issue is that ion-content is a custom component and it does not take
the scrollbar style. There's an easy fix - put all of your content within a
div (that is a direct child of ion-content), stretch it to take all the
space of the parent ion-content and make it scrollable (by giving it eg.
overflow: auto). This div WILL be styleable.
It's not the cleanest but it is a solution, super simple and works like a
charm.

On Thu, 30 May 2019, 08:44 rokkapun, [e-mail] wrote:

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.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/ionic-team/ionic/issues/17685?email_source=notifications&email_token=AELGL2KPBRTGFNF4EYRSBBLPX6AUNA5CNFSM4G33SQP2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODWRT7RA#issuecomment-497237956,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AELGL2NSJJQT6ZVK7D5EGV3PX6AUNANCNFSM4G33SQPQ
.

[danielsotopino]

@ldittel This did the trick for me:
Right below ion-content
<div style="background-color: #f2f2f2 !important; height: 100vh; overflow: auto;">

[lincolnthree]

@danielsotopino Thanks for this idea! Can you provide a little more context? Wouldn't a 100vh container cause some overflow of its own if the page has a header, etc? Where did you put this div? Inside or outside of ion-content?

[danielsotopino]

@lincolnthree

<ion-content>
<div style="background-color: #f2f2f2 !important; height: 100vh; overflow: auto;">
# content here
</div>
</ion-content>

[lincolnthree]

@danielsotopino Thanks, that makes sense. It works, but I think it also breaks <ion-infinite-scroll> :( Have you gotten the two to work together?

E.g. If everything is wrapped in the scroll-container div, ion-infinite-scroll never fires its event. I'm thinking it is bound to ion-content's scroll area.

[danielsotopino]

@danielsotopino Thanks, that makes sense. It works, but I think it also breaks <ion-infinite-scroll> :( Have you gotten the two to work together?

E.g. If everything is wrapped in the scroll-container div, ion-infinite-scroll never fires its event. I'm thinking it is bound to ion-content's scroll area.

Uh no, i'm not using <ion-infinite-scroll> right now, i'm sorry.

[lincolnthree]

@danielsotopino Thanks. Oh well. Not sure when this one will get addressed :/ It's not looking good.

[danielsotopino]

@lincolnthree i had a problem with the implementation i did, the scrolling did not work properly
you scrolled to the bottom of the screen and the scroll stopped before the end, then you scrolled again and then you could get to the bottom, but then you have the same problem when scrolling up..

i removed height: 100vh from the styles on the div and started working properly again, check if this helps somehow

[lincolnthree]

@danielsotopino Yeah I did the same thing but InfiniteScroll is still broken :(

[IsaacHub]

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.

[lincolnthree]

@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!

[lincolnthree]

Submitted a PR for this.

[git102347501]

我也遇到了类似问题，希望尽快解决

[JoshuaHetherington2019]

Any update on this?

[lincolnthree]

Negative. Still waiting. The workaround suggested in this comment works... some of the time... but does not reliably get things styled due to some kind of async timing issues. It seems to flicker and sometimes not apply to components:

https://github.com/ionic-team/ionic-v3/issues/737#issuecomment-519105142

If you can get it to work better I'd love to hear how.

[ReaperTech]

Negative. Still waiting. The workaround suggested in this comment works... some of the time... but does not reliably get things styled due to some kind of async timing issues. It seems to flicker and sometimes not apply to components:

ionic-team/ionic-v3#737 (comment)

If you can get it to work better I'd love to hear how.

a clue here - using the shadowRoot? - https://github.com/ionic-team/ionic-v3/issues/737
(macchie commented on Aug 7)

[loopezz]

Any progress on this issue, Ionic?

[wevertoum]

same issue...

[lincolnthree]

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".

[jgirdner]

So annoying!

[lincolnthree]

FYI for everyone else having struggling with this limitation. I've created a PR for a solution here. It's been open for a very long time... If anyone else wants to run with it, go ahead --- It would be nice to see a callback with pre-render hook for the DOM elements to insert styles, as I mentioned before. But... this works, too, it's just really inconvenient to try to have to do all this using CSS vars: https://github.com/ionic-team/ionic/pull/18777

[liamdebeasi]

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.

[lincolnthree]

@liamdebeasi No problem. Thanks for the workaround :)

[lincolnthree]

@liamdebeasi Actually, I just looked at your workaround again and noticed that you used a timeout of 250ms to achieve the scrollbar styles. This can lead to flicker and layout.

What are the chances of getting a beforeRendered() hook that allows us to modify the ion-content .scroll-content shadow DOM element before it gets attached to the browser DOM?

That would be ideal as we would not need to use timeouts and retries to try to "catch" the elements after they are added.

[lincolnthree]

@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.)

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.