Search code examples
ioscordovaionic-frameworkios9ionic3

ion-select component of Ionic 3 not working in IOS 9


We have developed one application using Ionic 3. We have used ion-select component at multiple places. In android & IOS version > 10, everything is working fine as expected.

But In IOS 9, ion-select component breaks. It shows blank options when tapping on ion-select.

<ion-item>
   <ion-label>Gender</ion-label>
   <ion-select>
     <ion-option value="f">Female</ion-option>
     <ion-option value="m">Male</ion-option>
   </ion-select>
</ion-item>

Result:

Error image on physical device

Environment Details:

Specific IOS version in which issue is reproducible: 9.3.5

global packages:

@ionic/cli-utils : 1.5.0
Cordova CLI      : 6.5.0
Ionic CLI        : 3.5.0

local packages:

@ionic/app-scripts              : 1.3.7
@ionic/cli-plugin-cordova       : 1.4.1
@ionic/cli-plugin-ionic-angular : 1.3.2
Cordova Platforms               : android 6.1.2 ios 4.2.1
Ionic Framework                 : ionic-angular 3.7.1-201710060319

System:

Node       : v7.8.0
OS         : OS X El Capitan
Xcode      : Xcode 8.2.1 Build version 8C1002
ios-deploy : 1.9.1
ios-sim    : 5.0.13
npm        : 4.2.0

Solution

  • I was able to resolve the issue by downgrading the app-scripts version to 2.1.4 from 3.0.1.

    I also had to add dev dependency tsc-wrapped to resolve some ts lint issues.

    "devDependencies": {
        "@angular/tsc-wrapped": "^4.4.6",
        "@ionic/app-scripts": "2.1.4",
        "typescript": "2.3.4"
    },
    

    After changing my configuration to above, the webpack process duration came down to 3-4 minutes from 35 minutes.