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

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