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

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

[loopezz]

Any progress on this issue, Ionic?