Ion-page-invisible class not being removed navigating in between pages [VIDEO]

I posted a twitch clip of the bug here. https://www.twitch.tv/videos/414282266

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:

Ionic:

ionic (Ionic CLI) : 4.12.0 (C:\Users\chris\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : @ionic/angular 4.3.0
@angular-devkit/build-angular : 0.13.8
@angular-devkit/schematics : 7.3.8
@angular/cli : 7.2.4
@ionic/angular-toolkit : 1.5.1

Cordova:

cordova (Cordova CLI) : not installed
Cordova Platforms : android 7.1.4
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 3.1.2, (and 7 other plugins)

System:

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

4 Likes

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

Here are my vitals (ionic info):

Ionic:

ionic (Ionic CLI) : 4.12.0 (/usr/local/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 4.4.2
@angular-devkit/build-angular : 0.11.4
@angular-devkit/schematics : 7.3.9
@angular/cli : 7.3.9
@ionic/angular-toolkit : 1.5.1

Capacitor:

capacitor (Capacitor CLI) : 1.0.0-beta.19
@capacitor/core : 1.0.0-beta.19

Cordova:

cordova (Cordova CLI) : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : ios 4.5.5
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 3.1.2, (and 9 other plugins)

System:

ios-deploy : 1.9.4
ios-sim : 8.0.1
NodeJS : v8.11.4 (/usr/local/bin/node)
npm : 6.9.0
OS : macOS Mojave
Xcode : Xcode 10.2.1 Build version 10E1001

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

<ion-button expand="block" routerLink="/home" routerDirection="backward" replaceUrl="true">

Hope this will solve this kind of problem. It works for me.

I’m having this issue with VUE and ionic TABS. ¿is there any solution?

1 Like

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 :slight_smile:

1 Like

I don’t quite understand the ion-page component, where and how does it have to be used? Do you have a small code sample from your example? Thanks!

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);
})

Also, I added min-height to app in component:

#app {
 min-height: 100vh;
}

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.

1 Like

I’m seeing this issue, too. Latest @ionic/vue and @ionic/vue-router, both at 6.2.2.

I used a similar workaround to @sayed_parentune, which so far doesn’t appear to cause any additional problems.

// Workaround for bug https://forum.ionicframework.com/t/ion-page-invisible-class-not-being-removed-navigating-in-between-pages-video/162114/9
router.afterEach(() => {
  nextTick(() => {
    document.querySelector('#main .ion-page.ion-page-invisible')
      ?.classList.remove('ion-page-invisible');
  });
});

informative thread indeed…..

1 Like

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.

Fun times.

2 Likes

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.

1 Like

For me: THIS WAS THE SOLUTION. Thank you so much!!

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.

But in the documentation they used <ion-page> before <ion-tabs>

and they use <ion-page> on every view that’s within <ion-tabs>. So what are we supposed to do now?