Ionic-framework: ion-select not scrollable on iOS

[oal]

Bug Report

Ionic version:
[x] 4.x

Current behavior:
ion-select with lots of select options is not scrollable on iOS.

Expected behavior:
ion-select should be scrollable when the number of select options don't fit in view.

Steps to reproduce:
Create a ion-select with 20 select options and run the app on iOS.

Other information:
It works on Android. Multiple select <ion-select multiple> also seem to work on iOS, so it only happens on single-select ion-select.

Ionic info:

Ionic:
   ionic (Ionic CLI)             : 4.8.0 (/home/olav/.npm-global/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0
   @angular-devkit/build-angular : 0.11.4
   @angular-devkit/schematics    : 7.2.3
   @angular/cli                  : 7.2.3
   @ionic/angular-toolkit        : 1.2.0

Cordova:
   cordova (Cordova CLI) : 8.1.2 ([email protected])
   Cordova Platforms     : android 7.1.2, browser 5.0.4, ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.2.0, (and 9 other plugins)

System:
   Android SDK Tools : 26.1.1 (/home/olav/Android/Sdk)
   NodeJS            : v11.7.0 (/usr/bin/node)
   npm               : 6.6.0
   OS                : Linux 4.18

[maddada]

Hey, I see that no one is answering issues these days.
I had a problem with iOS where I couldn't write in ion-inputs on iOS and Safari.
The temporary fix I did was to downgrade to @ionic/angular version 4.0.0-rc.1
(make sure to revert nav.goBack() to nav.back() )
Commands:
npm uninstall @ionic/angular
npm install @ionic/[email protected]

Good luck!

[brandyscarney]

Thanks for the issue! I confirmed this is a bug in iOS on Chrome as well. It seems the culprit is here: https://github.com/ionic-team/ionic/blob/master/core/src/components/action-sheet/action-sheet.ios.scss#L35

This was likely caused by the PR fixing the translucent action sheet here: https://github.com/ionic-team/ionic/pull/16862

Can you try the following workaround:

.action-sheet-group {
    overflow: auto !important;
}

We'll have to investigate this.

[oal]

Thanks, @brandyscarney. I can confirm that the workaround works!

[oal]

I tested in the Xcode simulator now, and the carrier / time bar seems to be rendered on top of the ion-select still. But at least it's scrollable now. :+1:

[brandyscarney]

@oal Good catch! Will also look into adding the safe-area for it. 🙂

[vyelamanchi]

Hi, We are using ionic 4.3.0 version & the issue still exists in iphones. We are getting the node_modules dynamically for every build so we can't just the update the css file in node_modules. What is the best way to handle this ?

[Antoine38660]

@vyelamanchi You can add it to your global.scss file.

With the !important rule, it will override the default style defined in your node_modules :slightly_smiling_face:

[vyelamanchi]

@Antoine38660
Thank you. that worked

[dylan-westbury]

.action-sheet-group.sc-ion-action-sheet-ios {
  overflow: auto;
}

In global file, will just target iOS and no need for !important

Any timeframe for a fix? For ion-select with a large list of options, user cannot select the first option.

[danbeckner]

@oal Good catch! Will also look into adding the safe-area for it. 🙂

Any timeframe on this? Still having this issue with IOS. It overflows into the top toolbar.

[krabien]

Adding the below to src/global.scss seems to fix both issues for me:

// workaround: full screen action sheet scrolling background on iOS
.action-sheet-group.sc-ion-action-sheet-ios {
  overflow: auto;
}
// workaround: action sheet not honoring safe area margins
.action-sheet-wrapper.sc-ion-action-sheet-ios {
  top: 0;
  height: auto;
}

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