Back navigation flashes previous pages. Also scrolls ScrollViews back to top in a visible way.

[tomups]

Environment

✔ Component nativescript has 7.1.2 version and is up to date. ✔ Component @nativescript/core has 7.1.4 version and is up to date. ✔ Component @nativescript/android has 7.0.1 version and is up to date. "@angular/animations": "~11.0.0", "@angular/common": "~11.0.0", "@angular/compiler": "~11.0.0", "@angular/core": "~11.0.0", "@angular/forms": "~11.0.0", "@angular/platform-browser": "~11.0.0", "@angular/platform-browser-dynamic": "~11.0.0", "@angular/router": "~11.0.0", "@nativescript/angular": "~11.0.0", "@nativescript/core": "~7.1.0",

Describe the bug When navigating back between pages of a page-router-outlet (possibly only in nested ones?), sometimes a previous page flashes briefly between the navigation of other pages. Also if we navigate back to a page that was scrolled down, it shows scrolled in the same position briefly and then suddenly scrolls back to the top.

To Reproduce Check playground or attached project. Scroll down on page 1 to see the next button. Tap "next" in all pages until reaching Page 4. Navigate back from Page 4. When reaching Page 2 you will see Page 3 flash briefly before navigating back to Page 1. Also all the scrolled pages return to the top when navigating back.

Also if you navigate back from Page 1 at this point (using the Android hardware button), it will keep navigation in an unexpected way between pages until it finally closes the app. This should not happen at all as I understand the navigation stack should be empty at that point?

Expected behavior Navigating back should behave the same as navigating forward (same transition, no unexpected flashes of content). The scroll position of a previous page should be kept (as it was not destroyed).

Sample project NS7 sample project Also happens in PlayGround with NS6.5 https://play.nativescript.org/?template=play-ng&id=jqpxnh&v=5

Additional context Not sure if this happens without nested page-router-outlets

[tomups]

Here is a video of it happening

https://user-images.githubusercontent.com/690217/106052390-cd1fec80-60e9-11eb-8af6-d9a54b780fa3.mp4

[tomups]

A colleague found a weird solution for this...

Importing Page and binding to its onNavigatedFrom event (even with just an empty function) in each component that can be navigated through the page-router-outlet, fixes all this behaviour!

this.page.onNavigatedFrom = () => {};

No idea why though, but at least there is a solution!

Here is the fixed NS7 example from before:

backtest-fixed.zip

On a side note, it seems the fix doesn't work in 6.5 with this.page.on("navigatedFrom", () => {}); (as there is no exposed onNavigatedFrom property of page as far as I could see in 6.5). I found out when trying to update the Playground example.