Ionic-framework: bug: nav.push does not always open the new page

[ErkoKnoll]

Type: bug

Ionic Version: 2.x

Platform: android 5.1

Ionic Version:2.0.0-beta.0

Quite often when trying to pop up a new page by using push function from NavController the page does not show up. However the code in the target page component constructor gets executed, so it seems to be view related issue. The page seems to open but not displayed properly because the current page which should remain in the background remains visible but is totally unresponsive. And when clicking multiple times on the place where the back button would of been in the new page sometimes it registers a back button click event and closes the page on top that happens to be invisible. Closing animation is shown in that case. Also sometimes it registers double click event and closes also the page that is underneath (unresponsive page) resulting in blank screen.

[adamdbradley]

Would you be able to create a minimal test case that replicates this issue?

[ErkoKnoll]

I was able to create a thumbed down version of my app where the issue persists. Can I get an email where to send it to? I prefer to send it privately since it is part of proprietary enterprise app.

[adamdbradley]

Sure, you can send it to adam at ionic io

[mebibou]

I actually have the same problem but on an iPhone 4s with ios 7.1.2, where the app never goes beyond the first screen. Btw, what's the minimum iOs version for ionic2?

[adamdbradley]

@mebibou I'd like the minimum iOS version to be 7, and we haven't come across anything yet that we shouldn't be able to meet that goal. But this one we'll for sure look into and fix up, thanks.

[mebibou]

@adamdbradley ok sounds good, actually I'd like to rectify it was on iPhone 4 and not iPhone 4s, it that makes any difference

[ErkoKnoll]

After having upgraded to beta 1 this issues does not seem persist anymore. I guess it was solved by the upgrade.

[mebibou]

@ErkoKnoll I'm using beta1 and have the problem

[adamdbradley]

@mebibou What inline styles are left on the elements? Is it from any navigation or just pop? Which version of iOS was it not working on? Any JS errors or css styles being applied that that version of iOS does not support? Thanks

[mebibou]

@adamdbradley ok I tried again and the home page disappears but I have a black screen, and kind of see a white line on the right side, and inspecting the <ion-tabs> the css is:

opacity: 1;
-webkit-transform: translateX(99.5%);

Obviously when I remove the translate manually from within the inspector then the content appears. Also after that, when I tried to change tabs it takes about 10s the first time the tab loads, and around 3s after that, and basically every navigation takes a very long time to work

Note: the code behind is this._nav.push(TabsPage);. iOs version: 7.1.2 (iPhone 4), no JS error

[adamdbradley]

Ok, I think I have it fixed with this commit: https://github.com/driftyco/ionic/commit/4524e5ad7dd1561c85fa89497530fd54f53d4612

This will go out in the next release soon, thanks!

[quentinchap]

Hi,
i have the same problem with the beta10

[ErkoKnoll]

I seem to have a similar problem. A specific page does not seem to open at first attempt when pushed in. And when pushed in the second time it opens. However in the background it does invoke the constructor at first attempt but just renders invisibly. Second time it opens up properly but when when back button is pressed then the secondly opened page closes but the invisible page keeps blocking the rendering of the page that was underneath, though events go through and when back button is pressed again then the page that was underneath that was blocked from rendering displays properly rendered content. I cant seem to figure out why this specific page acts like this, even removed most of the content and kept "Hello World" there, still didn't solve it while the other pages that are opened from the same sub page open up correctly.

[BurningDog]

I'm experiencing this bug too. Also on beta10 and only on iOS. Navigation starts out being single click but after navigating around I often need to click twice to get the page to open (I can re-create this in the iOS simulator, hence the clicking). I can't recreate this by a simple "Ionic serve" and doing testing in Chrome.

There aren't any javascript errors before this happens. Not sure exactly why this breaks. Should I open a new issue or do we keep the discussion here?

[jgw96]

Hello, thanks for opening an issue with us! Would you be able to provide a plunker that demonstrates this issue? Thanks for using Ionic!

[tvanesse]

Same problem here, but with Android too.

To elaborate, the problem does not occur when running ionic serve and testing the app within Chrome. It only happens after the app is deployed on the actual device, in my case a Wiko Iggy (Android 4.2.2). I am using Crosswalk.

[remithomas]

Same problem with [email protected] :(
Tested on iphone6s.

[EralpB]

+1 ....

[jgw96]

Hello all! Would any of you guys be able to post a repo that i can use to reproduce this issue with? Unfortunately, i cannot reproduce it on my iphone 5 or any of my nexus devices with any of my test apps. Thanks!

[andersfa87]

I'm also experiencing this @jgw96 .

I'm able to reproduce it with this very basic starter ionic2 app. Just adding a button that pushes a new page.
https://github.com/andersfa87/wonkyionic2navigation

I can't reproduce it in browser or on a fast device, i.e iPhone 6s. But it does happen in our more complex app, that has more content on the pages.
But it's quite easy to make it happen on iPhone 4s and iPhone5.

To make it happen just press the push button and back button very quickly.

iPhone4s: http://i.imgur.com/yQmsG7r.jpg
iPhone5: http://i.imgur.com/Ca0F1jg.jpg

[almost92]

@jgw96 any updates on this issue ?

[MarkChrisLevy]

Hi, I'm having the same problem, both on ios and android... but I think, that it doesn't matter what kind of device, but rather it is related to the speed/power of given device. My app is quite heavy and running it on a slow device causes this problem. @jgw96 please try with ios simulator and open a page, that generates lots of content/tabs etc. I see, that content is generated, but new page never gets shown (class show-page is not set).

[jgw96]

Hello all! With beta.12 we are now using aot compile which compiles all the templates used in your app at build time instead of when you are using the app on your device. With this change it gets rid of the compiler needing to run when navigating to a new page, which completely fixes this issue even on slower devices. This also results in navigation being much faster than before. Thanks for using Ionic!

[MarkChrisLevy]

Thanks @jgw96. Do you think, that beta.12 is to be released in days or weeks?

[jaemmer]

We had the same issue, but we were doing the .push in the constructor. Once we moved it out of the constructor it solved the issue. So, maybe consider the order that the events are happening.

[andersfa87]

@jgw96 Hey Justin,

So I just tried the nightly to see if the issue was resolved. Sadly it's not :(
Check out my video:

https://hurtig.ninja/d/abc741d1.mp4

Here's to hoping you can squeeze in a fix for beta.12 :)

[curtisblanchette]

Also experiencing this in RC1.

I have a tab page that pushes a tab-subpage. 75% of the time resulting in a black screen. Looking at the DOM, it appears that the "show-page" class is seldom being added to the new page.

[MathieuNls]

I have the same behaviour as @curtisblanchette: show-page isn't added to the pushed view.

<!-- Root Page -->
<ng-component class="ion-page show-page" style="z-index: 99;">
...
</ng-component>
<!-- Pushed View with http://ionicframework.com/docs/v2/api/navigation/NavController/ (Not visible) -->
<ng-component class="ion-page">
...
</ng-component>

[almost92]

still experiencing this in RC2

[manucorporat]

Can you guys try against nightly?

npm install ionic-angular@nightly --save

[EMProduct]

I'm having the same problem
my app starts with welcome page that push a tabs page which get executed but never showed ( doesn't get visible) , but the app acts as it is the visible page

and this happen for the first time that push the tabs , if i get back to welcome and enter the tabs page again it become visible and acts correctly

it works correct on android 6 , ios 10 , browser and ionic serve
and it fails on android 5.1

"ionic-angular": "2.0.0-beta.11",
"@angular/common": "2.0.0-rc.4",
"gulp": "3.9.1",
"gulp-watch": "4.3.5",

is there is a solution soon ?

[EMProduct]

@manucorporat
I tried your solution, it gives me an errors an the app failed to load

[hari1207]

I'm having the issue:
Navigation working fine Android devices, and windows browser, Mac browser..... but navigation controller is not working in IOS devices like simulator.

This is my code....
--------------------------Html----------------
""

....

....

...

....

""
---------------------------------Below ts code----------------
ts code:
pageA() {
this.navCtrl.push(PageA);
}
.........pageA navigation is working fine

pageB() {
  this.navCtrl.push(PageB);
}

.........## pageB navigation is not working

pageC() {
  this.navCtrl.push(PageC);
}

.........pageC navigation is working fine

pageD() {
  this.navCtrl.push(PageD);
}

.........pageD navigation is working fine but redirecting to pageA screen

[JianGuo222]

I'm having the same issue, I'm using "ionic-angular": "2.0.0-rc.3"

[JianGuo222]

in browser, ionic view, works fine, as soon as I run
ionic run android

the navController stopped playing nice

[davorpeic]

@JianGuo222 you are 4 versions behind, so I would start with updating ionic first and then see if the error continues.

[almost92]

still experiencing this in ionic 3.1.1

[pscott-au]

seeing similar behaviour only on android build

[niklilland]

Seeing this behavior on an android build as well, ionic 3.9.2, cordova 7.0.1

[mebibou]

@niklilland 3.9.2 is the cli version

[SPhrenic]

I'm also experiencing this problem... Using a sidemenu with functions to push to a new page... one page doesn't seem to work... sidemenu just closes. 3 buttons refering to the following 3 functions:

  goToProfile() {
    this.navCtrl.push(ProfilePage);
  }
  goToChars() {
    this.navCtrl.push(HomePage);
  }
  goToGames() {
    this.navCtrl.push(GamePage);
  }

However, going to a working page, then going back.. the non-working page is displayed (although messed up) and can also be popped...

I'm working with:
cli packages:

@ionic/cli-utils  : 1.9.2
ionic (Ionic CLI) : 3.9.2

global packages:

Cordova CLI : 7.0.1

local packages:

@ionic/app-scripts : 2.1.3
Cordova Platforms  : none
Ionic Framework    : ionic-angular 3.6.0

System:

Android SDK Tools : 25.2.5
Node              : v6.11.2
npm               : 3.10.10
OS                : Windows 10`

[EDIT with Solution for me] I found I used a ngIf to an undefined item. My desktop knew how to ignore it but my android phone seemed to have issues with it. Solved by fixing that code...

[niklilland]

@mebibou ha! my mistake, it's ionic 3.5.3.

[niklilland]

It turned out to be our own bug, not an issue with ionic. Sorry!

[ssgriffen]

@niklilland What was it in your code? I feel like I'm having the same issue

[ssgriffen]

@niklilland Nvm. I found that I wasn't closing the ionic loader component properly.

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