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

1 Like

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.