Basically I have a tabs page and when I navigateForward or navigateByRoot for some reason the transition gets messed up and the next Ionic page that I point the URL aat that has ion-page-invisible
It seems to be an issue with ionic’s navController and/or the angular router… I tried updating to the latest versions of ionic and angular here is my ionic info here:
NodeJS : v10.14.2 (C:\Program Files\nodejs\node.exe)
npm : 2.15.12
OS : Windows 10
The only thing notworthy about the page I’m navigating from is that it uses ion-tabs. Maybe the ion-tabs is causing conflict with the nav controller/angular router… But the page I’m navigating too is just a normal page with ion-content
I believe I’ve encountered the same, or a very similar, bug as you: attempting to navigate to a child page of a tab page renders that page, but the ion-page-invisible class is not removed, and therefore the child page cannot be properly interacted with. In my case the child page renders properly the first time it is encountered, but upon subsequent loading the class removal bug is triggered; aka I can navigate to the child route without issue once, but navigating away and then loading the route/page again, with either the same or different data, triggers the bug and the page is not shown.
I’ve created a video to demonstrate this behavior:
One frustrating aspect of this: I have 2 other tabs with a similar parent tab page/child pages structure that do not trigger this bug, and so far I have been unable to determine anything different about their structure to indicate why the Photos tab fails when the other do not.
Also of note: the closed bug report (https://github.com/ionic-team/ionic/issues/15619) describing a similar issue seems to be difficult to reproduce or happens more often on Android, whereas my bug is very consistent and reproducible with the latest version of Chrome on Mac (74.0.3729.169).
The only workaround I’ve come up with is pretty rough: I’ve changed the routerLink on my ion-item to href, so that linking to the child page does a hard reload of the app, versus a pleasant in-app navigation.
Hello @bradshopthrilling use replaceUrl=“true” in your routerLink like this <... routerLink="/article/{{item.id}}" routerDirection="forward" replaceUrl="true"> and on back link like this
I encountered this issue as well @Matesanz and my problem was using ion-app i just changed it to ion-page and that worked for me. Hope that helps even I am 5 months late
I had the same issue. The problem was that I wasn’t importing IonPage,IonHeader,IonContent,IonFooter in every page of my project. When I did problem was fixed.
I had a similar problem since past two days. I was importing all the required components and I couldn’t figure out why this maybe happening. I know it started happening when I changed structure in one of my tabs which also had a child router.
I fixed the problem by adding afterEach hook to my router like this:
router.afterEach((to, from) => {
//.. other code
setTimeout(() => {
const main = document
.getElementById("main-content")
.querySelector(".ion-page.ion-page-invisible");
if (main) {
main.classList.remove("ion-page-invisible");
}
}, 100);
})
I’m still having this issue. Using ionic-react and ionic-react-router 6.0.13. The “ion-page-invisible” class seems to not get removed when navigating using routerLink within the same tab.
So for me this was having more than one IonPage, since IonTabs provides a child IonPage element automatically. Of course this is not documented, yet the documentation says to use an IonPage as the top level element for each Route.
So for me this was having more than one IonPage, since IonTabs provides a child IonPage element automatically.
By Jove, this was it! Thank you so much, stranger. Eliminating the <ion-page> I had before an <ion-tabs> component completely fixed my issue. Thank you for the tidy fix.
For me this behavior was being caused by accidentally having exact={true} on a route, when trying to render nested routes in that route with IonTabs.
/page exact={true}
/page/tab1
/page/tab2
The tricky part was that even though the sub-routes (afaik) aren’t supposed to render at all, they would actually render but Ionic hides them with ion-page-hidden. If the tab2 page didn’t render at all, I probably would have caught the exact issue sooner.