Ionic-framework: Scrollbars missing on android

[Isigiel]

Ionic version: (check one with "x")
[ ] 1.x
[X] 2.x

I'm submitting a ... (check one with "x")
[X] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:

On the device version of my app all scrollbars are gone, when I open the app via the chrome on android, the scrollbars are visible

Expected behavior:

Scrollbars should also be visible when the app is running in _native-mode_

Steps to reproduce:

Apparently just use ionic to build for android.
Related code:
The whole source code is on here, I have this problem all over my app.
https://gitlab.com/pikandpeople/mobile-next

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Your system information:

Cordova CLI:  You have been opted out of telemetry. To change this, run: cordova telemetry on.
6.5.0

Ionic Framework Version: 2.1.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 1.1.4
ios-deploy version: 1.9.1 
ios-sim version: Not installed
OS: macOS Sierra
Node Version: v7.6.0
Xcode version: Xcode 8.2.1 Build version 8C1002

[jgw96]

Hello, thanks for opening an issue with us. Unfortunately I cannot reproduce this issue on either a Nexus 6 running Android 7.1.1 or a Moto G running Android 4.4.4. What version of Android are you running into this issue on?

[Isigiel]

I'm using a Oneplus two with android 6.0.1

[jgw96]

@Isigiel hmm thats interesting. Can you try opening this https://pwa.ionic.io/ionic-conference-app/www/ in chrome on your Oneplus and seeing if that shows scrollbars?

[Isigiel]

It has scrollbars, but mine does as well in when openen as a pwa. Only when using ionic build I seem to loose them.

[jgw96]

Hello @Isigiel, unfortunately i have been unable to reproduce this issue on either a 1st Gen Moto g, a Nexus 4, Nexus 6 or Nexus 6P. Because of this I am going to have to close this issue for now. Their is a possibility that this behavior is specific to OnePlus devices (something that they have implemented in the OS) and unfortunately if thats the case their is not much we can do.

[peter-bozovic]

I'm also experiencing the same issue on my Ionic project.

Testing on 2 Android devices:

• HTC One m7 with Android 5.0.2
• HTC 10 with Android 7.0

When run with ionic cordova run android --device on pages that exceeds screen height, scrollbar is not displayed.
We can scroll, but we don't know where we are on the page or how much need to be scrolled to get to the bottom.

Note that the scrollbar appears on iOS correctly, the issue appears only on Android

My ionic info:

cli packages:
    @ionic/cli-plugin-cordova       : 1.6.2
    @ionic/cli-plugin-ionic-angular : 1.4.1
    @ionic/cli-utils                : 1.7.0
    ionic (Ionic CLI)               : 3.7.0
global packages:
    Cordova CLI : 7.0.1
local packages:
    @ionic/app-scripts : 2.1.3
    Cordova Platforms  : android 6.2.3 windows 5.0.0
    Ionic Framework    : ionic-angular 3.6.0
System:
    Android SDK Tools : 25.2.2
    Node              : v6.9.5
    OS                : Windows 10
    npm               : 3.10.3

[bhavincb]

+1 on xiomi redmi 3s prime scrollbar are not visible.

android version 6.0.1

[BeliliFahem]

same prolem with : Wiko TOMMY 2 PLUS, Sumsung Galaxy S6, S7. and Alcatel A5 LED :'(

[synio-wesley]

Same problem. For some reason the scrollbars appear when opening the side menu. When "pointer-events: none;" is set to the ion-content, then the scrollbars are visible, but they disappear when "pointer-events: auto;" is set. No idea why.

[synio-wesley]

Update; For me, it helped to define some ::webkit-scrollbar properties. I made my scrollbar display in my theme color as well. This was the fix for me:

  ::-webkit-scrollbar {
    width: auto;
  }
  ::-webkit-scrollbar-thumb {
    background: color($colors, 'primary');
  }

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