Status bar overlaps with header when navigate new page in modal


Ionic version:
[x ] 3.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:

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

// the in modal page, click a button to nav new page
navModal2() {
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

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

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”

I have create an issue in ionic github here:


Just a quick reminder,
If this issue only happens in some of the subpages, you probably used nav.push() inside a modal(this is depreciated).
To fix this issue, in your modal

import { App, ViewController } from 'ionic-angular';
      public viewCtrl: ViewController
      public app: App
    ) {}

replace push() with below