Status bar overlaps with header when navigate new page in modal

[JackZhang1988]

Ionic version: (check one with "x")
(For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[x ] 3.x
[ ] 4.x

I'm submitting a ... (check one with "x")
[x ] bug report
[ ] feature request

Current behavior:

I very same like the bug here: #13294, but the issue closed seems hard to reproduce, now i finally reproduced.

Steps to reproduce:

These bug happen when you nav a new page in a modal, I have create repository for this: https://github.com/JackZhang1988/ionic_statusbar_bug

// in hello-ionic page ,you open modal
openModal() {
    let curModal = this.modalCtrl.create("Modal1Page");
    curModal.present();
  }

// the in modal page,  click a button to nav new page
 navModal2() {
    this.navCtrl.push('Modal2Page');
  }

run sudo ionic cordova prepare ios, and build on iPhone by Xcode.

then, you can reproduce the bug show as the picture.

i tried add newest cordova-plugin-statusbar but it is not work

Ionic info:
cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.19.2
ionic (Ionic CLI) : 3.20.0

global packages:

cordova (Cordova CLI) : not installed

local packages:

@ionic/app-scripts : 3.1.9
Cordova Platforms  : none
Ionic Framework    : ionic-angular 3.9.2

System:

Android SDK Tools : 26.0.2
ios-deploy        : 1.9.2
ios-sim           : 6.0.0
Node              : v8.9.1
npm               : 6.0.0
OS                : macOS High Sierra
Xcode             : Xcode 9.3 Build version 9E145

Environment Variables:

ANDROID_HOME : /Users/jianbo/Library/Android/sdk

Misc:

backend : pro

ionic cordova plugin list
cordova-plugin-device 2.0.2 "Device"
cordova-plugin-ionic-keyboard 2.0.5 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 1.1.19 "cordova-plugin-ionic-webview"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-statusbar 2.4.2 "StatusBar"
cordova-plugin-whitelist 1.3.3 "Whitelist"

[charlyBerthet]

Same problem, I had to use this.viewCtrl.dismiss({goTo:pageName}) in the modal then push in the parent page like this :

modal.onDidDismiss(data => {
          if(data && data.goTo){
             this.navCtrl.push(data.goTo);
          }
})

[JackZhang1988]

@charlyBerthet yes, your solution is right, but sometime i need to keep modal open when i nav to new page. Do you have any other suggestion?

[derek90]

I'm having a similar problem. There are some solutions here: #8151

[ggobea]

Same problem!

[smxdevst]

Same issues were open last year April and still weren't resolved...

[ionitron-bot]

This issue has been automatically identified as an Ionic 3 issue. We recently moved Ionic 3 to its own repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

If I've made a mistake, and if this issue is still relevant to Ionic 4, please let the Ionic Framework team know!

Thank you for using Ionic!

[ionitron-bot]

Issue moved to: ionic-team/ionic-v3#622