v2 beta.10: Page with ion-tabs left in hidden state on first access (device only)

[JustinPierce]

Short description of the problem:

Several pages in our app no longer load correctly with beta.10. When hosted inside of <ion-tabs>, the page appears to load and execute (verified via logs), but does not display. If I navigate backward using either gestures or the Android back button and then load the same page a second time, it works just fine.

This issue only started happening to us with beta 10, and only occurs on actual devices. It happens on both iOS and Android. I have verified that the individual pages work just fine when they are not hosted inside of <ion-tabs>, and they worked fine inside of <ion-tabs> in beta 9. There are no errors in the log; the page just fails to display the first time it is loaded.

Steps to reproduce:

I have spent a couple of days trying to boil this down to some sort of base case, but I can't come up with anything that fails reliably. All I know for certain is that these pages worked before and do not work anymore. Short of rebuilding our app from the ground up, I'm not sure of what steps to take.

My particular application has a left-side menu, and I am navigating from an <ion-list> item to a page that contains the <ion-tabs>. It is the page containing the tabs that fails to display, and it appears somehow dependent on the content of the pages hosted by the tabs.

Which Ionic Version? 1.x or 2.x

2.x

Plunker that shows an example of your issue

No can do. See the explanation above. Maybe when I have another weekend to waste.

Run ionic info from terminal/cmd prompt: (paste output below)

Your system information:

Cordova CLI: 6.2.0
Gulp version:  CLI version 3.9.1
Gulp local:   Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.10
Ionic CLI Version: 2.0.0-beta.32
Ionic App Lib Version: 2.0.0-beta.18
OS:
Node Version: v5.11.1

[guillenotfound]

Similar to mine? #7157

[JustinPierce]

@ZiFFeL1992 Not quite. With this issue, the page I am navigating to contains the tabs. Visually, it appears that the application hasn't navigated on Android and that it's stuck half-navigated on iOS. In reality, the navigation has taken place; it's just not displaying the new page correctly.

[jgw96]

Hello, thanks for opening an issue with us! Unfortunately i can't seem to reproduce this issue with any of my apps our our conference app updated to beta.10. Is there any way that you could share a minimal example that has this issue? Unfortunately, if I can't reproduce the issue, there is not really much I can do, so a minimal example would be great!

[JustinPierce]

@jgw96 I'll give it a shot when I have time. I haven't been able to successfully devise a minimal example of my own, which is why it isn't here. All I can say so far is that I can make the problem page load by removing large chunks of the child pages, and I can get it to fail by adding parts back. The problem is that the parts I add back seem completely arbitrary. I'll see what I can come up with, though.

[JustinPierce]

@jgw96 Alright, progress! I still don't have a working example for you, but I can give you a definitive cause: for whatever reason, the page I am navigating to does not receive the show-page CSS class. The page is 100% loaded and operational, and you can technically interact with it, but its opacity is 0 because it doesn't have show-page. Navigating back and then forward again correctly applies the show-page class to the new page.

Additionally, one of my tabs allows navigation to a third page (also with tabs). This page exhibits the same issue: the first time the page is shown, it does not get the show-page class. It's almost as if the page transitions aren't running correctly.

I still don't have a minimal example, but hopefully this helps while I try to work one out.

[jgw96]

@JustinPierce ahh glad to see progress on the issue! Still cant seem to reproduce with any of my tests (at least not yet), but atleast it looks like we're closer to a minimal example. (:

[JustinPierce]

@jgw96 I'm still unable to get a minimal example going. What I've learned since then is that I can work around the issue in two ways:

1. Add show-page to the page manually in ionViewDidEnter, if it's not there.
2. Disable the navigation transition animation with navController.push(MyPage, null, { animate: false }).

The second workaround was inspired by #7171, and makes me think my problem may be a side effect of that issue.

[jgw96]

@JustinPierce hmm thanks for the info! I'll take a look at that issue and see if maybe there is something underlying going on here. Note to team: sounds like maybe this could be an animation timing issue of some kind.

[EvanWillms]

I've been chasing a similar, but potentially different, issue for a few days where navigating to a new page from a tabRoot would instantiate the page and attach it to the DOM, but not get it displayed.

An afternoon of dead-chicken debugging has revealed that page Components with a selector defined don't display and page Components without a selector key do display.

[jgw96]

@EvanWillms Components used as a page should not have a selector (we are currently working on documenting this clearly) as a selector gets added by ionic automatically. @JustinPierce Are you using a selector with your components?

[JustinPierce]

@jgw96 No selector, here. In fact, while I was trying to figure out what was going on, I tried adding selectors to the pages. It didn't make a difference either way. The only pattern I saw (other than the two workarounds I provided) was that the problem begins to manifest once the page reaches a certain level of complexity, particularly with asynchronous (Rx-based) operations.

[jgw96]

Hello! Unfortunately I still cannot reproduce this issue. Since it seems to be something wrong locally with your app, and not an actual issue with the framework i am going to be closing this issue for now. Thanks for using Ionic!