Ion-nav inside Popover (iOS)

Ionic Framework ionic-v3
1

So I tried creating ion-nav inside popover component. it works fine in Android and web but doesn’t work in iOS for some reason. I can’t click any item. Even the click/tap event won’t trigger on ion-item. See code below

popover.html

<ion-content>
    <ion-nav [root]="rootPage" [rootParams]="{'global': global}"></ion-nav>
</ion-content>

ion-nav-list.html

<ion-content>
  <ion-list>
    <ion-item *ngFor="let setting of settingsList" (tap)="goToItems(setting)" tappable>
        {{ setting }}
        <ion-icon name="arrow-forward"></ion-icon>
    </ion-item>
  </ion-list>
</ion-content>

ion-nav-list.ts

  settingsList = ["Alignment", "Theme", "Font Size", "Font Name", "Extra Spacing"];

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidEnter(){
    this.global = this.navParams.get('global');
    var data = {
      'extraSpace' : this.global.getPadding(),
      'alignment': this.global.getActiveAlignment(),
      'fontSize' : this.global.getFontSize(),
      'fontName' : this.global.getFontName(),
      'theme': this.global.getTheme()
    }
    window.localStorage.setItem('data', JSON.stringify(data));
  }

  goToItems(setting){
    alert(setting);
    let global = this.global;
    this.navCtrl.push(SettingsPopoverItemsPage, {
      'dest': setting,
      'global': global
    });

Pls. help. Thanks