bug: scroll bar not showing up for ion-select or alert popup on Android

[DiogoParrinha]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x

Current Behavior

When using ion-select or ion-alert, if there are more options than the ones that fit the screen, the vertical scrollbar doesn't show up.

This seems to work well with ionic serve but not when running on an Android device.

Links:

• https://ionicframework.com/docs/api/alert
• https://ionicframework.com/docs/api/select

I've tried setting overflow: auto !important; but it just doesn't seem to do anything on the device. Scrolling works fine but the user won't know there's anything to see if there's no scroll bar :)

I've spent countless hours searching for possible solutions:

• https://stackoverflow.com/questions/43143299/ionic-scrollbar-is-not-visible-in-android-phone
• https://stackoverflow.com/questions/31547329/make-scrollbar-visible-in-ionic-content-when-using-native-scroll
• ion-select scrollbar on chrome on windows #17397

Expected Behavior

This was the only one that worked #17397 (comment) but it's somewhat of a hack to actually customize the scroll bar in order to see it. This should be provided by ionic out of the box to match the design of the given OS.

Steps to Reproduce

Create an ion-select or an alert with ion-alert for radio or check boxes and make sure there are many options.
There is no scrollbar on Android (device or emulator).

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 6.13.1 (C:\Users\diogo\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 5.6.4
@angular-devkit/build-angular : 0.1102.9
@angular-devkit/schematics : 11.2.9
@angular/cli : 11.2.9
@ionic/angular-toolkit : 3.1.1

Capacitor:

Capacitor CLI : 3.2.3
@capacitor/core : 3.2.3

Cordova:

Cordova CLI : not installed
Cordova Platforms : not available
Cordova Plugins : not available

Utility:

cordova-res : 0.15.3
native-run : 1.4.1

System:

NodeJS : v14.16.1 (C:\Program Files\nodejs\node.exe)
npm : 7.23.0
OS : Windows 10

Additional Information

No response

[sean-perkins]

Duplicate of #23299.

Please refer to: https://material.io/components/dialogs#behavior. The implemented design pattern of not showing the scroll bar is the recommended approach for Material design.

[DiogoParrinha]

@sean-perkins thanks for the reference. However, if you notice the material design demo you can seee that the bottom of the dialog partiallycovers the last entry that is visible, indicating that you can scroll. In ionic it displays the full height of the text so it's impossible to know if you can scroll. Does that make sense?

[DiogoParrinha]

@sean-perkins it seems like after upgrading to ionic 6, this is working properly!

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