ionic router creates ionic-page-invisible and not removed

user_3232194 0
Viewed 636

ion-router-outlet creates an ion-page-invisible class on the routed component. It doesn't remove it on first load, as a result shows a white screen. Subsequent visits are fine, or a reload will remove it. I tried manually remove the class as I found on the internet, but it doesn't work. This page-invisible is blocking the entire content. You can see the components inside the route on inspection, you can even click on it and it works accordingly but cannot see anything. I've tried rerouting to different components, it is the same. This happens on iOS/safari, mobile and desktop.

I also tried this using regular angular <router-outlet> and that works as expected but I cannot use that here for subsequent components.

My layout:

<ion-app>
        <ion-content class="ion-padding" [scrollEvents]="true" overflow-scroll="false">
            <app-navbar></app-navbar>
            <ion-router-outlet id="main-content"></ion-router-outlet>
        </ion-content>
</ion-app>

Output:

    <ion-router-outlet class="menu-content menu-content-overlay hydrated">
// ion-page-invisible is blocking the view
        <app-component class="ion-page ion-page-invisible">
//shows all the markups in component
</app-component>
    </ion-router-outlet>
progressive-web-apps ionic-framework angular
1 Answers

One of the reasons I found out this may happen is when you have more than one ion-page nested. e.g.

<ion-page> // <-- one here
  <ion-router-outlet>
    <route path="/">
      <ion-page> // <-- another one here
        <ion-page> // <-- another one here - This one must be removed!
          ...
        </ion-page>
      </ion-page>
    </route>
  </ion-router-outlet>
</ion-page>

Disclaimers: I am using with React. My module version package.json is as follows:

  • "@ionic/core": "^6.1.5"
  • "@ionic/react": "^6.1.5",
  • "@ionic/react-router": "^6.1.5"

Something to do with the 'stack navigation' not working properly, in my case (https://ionicframework.com/docs/react/navigation#ionpage).

user_79334430
Related