question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Ionic 4 Old page overlays over current page after navigation

See original GitHub issue

Bug Report

Ionic Info Run ionic info from a terminal/cmd prompt and paste the output below.


Ionic:

   ionic (Ionic CLI)          : 4.1.2 (/home/prasun/.npm-global/lib/node_modules/ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.3
   @angular-devkit/core       : 0.7.4
   @angular-devkit/schematics : 0.7.4
   @angular/cli               : 6.1.4
   @ionic/ng-toolkit          : 1.0.6
   @ionic/schematics-angular  : 1.0.5

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : android 7.0.0, browser 5.0.4
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.2, cordova-plugin-ionic-webview 2.0.2, (and 9 other plugins)

System:

   Android SDK Tools : 26.1.1 (/home/prasun/Android/Sdk)
   NodeJS            : v8.12.0 (/usr/bin/node)
   npm               : 6.4.0
   OS                : Linux 4.15

Describe the Bug After a few page navigations, when I navigate to the home page using angular’s router navigate, one of the following things happen:

  1. The navigation works fine.
  2. A previous page in the navigation stack overlays the current page
  3. A previous page in the navigation stack overlays the current page but is invisible. Because of this, the user can’t tap anywhere the overlay page has elements.

Upon further investigation, I’ve found that this happens because the app-home has a z-index of 99 whereas the previous page has a z-index of 100

screenshot from 2018-09-16 17-02-36

Here, app-home is the current page, but the pages above it in the navigation stack are causing problems

Expected Behavior Other pages which are not in the route should not overlay the current page

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:18 (8 by maintainers)

github_iconTop GitHub Comments

1reaction
hiepxanhcommented, Nov 14, 2018

Test on Emulator device part 2:

  • Android 4.4, API level 19, chrome version 30 error: image image

  • Android 5, chorme version 39 error: image image

  • Android 6, chrome version 44: image image

  • Android 7, chrome 55: working without ion-page-invisible image

0reactions
ionitron-bot[bot]commented, Jan 22, 2019

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Read more comments on GitHub >

github_iconTop Results From Across the Web

[Ionic 4] Old page overlays over current page after navigation
A previous page in the navigation stack overlays the current page but is invisible. Because of this, the user can't tap anywhere the...
Read more >
Ionic 4 Old page overlays over current page after navigation
The navigation works fine. A previous page in the navigation stack overlays the current page; A previous page in the navigation stack overlays...
Read more >
Pages overlaps on navigation in Ionic4 - Stack Overflow
I am facing an issue during navigation the pages overlaps like below give picture. I am using NavController for navigation. public ...
Read more >
Pages Overlaps On Navigation In Ionic4 - ADocLib
When I put an ion-fab with slot"fixed" , the FAB icons overlap the iOS status bar. Create a blank page with ion-content; Put...
Read more >
Announcing Ionic 6 - Ionic Blog
Ionic 6 has fewer breaking changes than both the previous Ionic 4 and ... Ionic 6 Migration Guide to get step-by-step upgrade instructions....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found