Ionic 4 breaking navigation behaviour


#1

I am experiencing some very odd behaviour with the Ionic app when it comes to navigation - 2 problems in particular that i presume are related.

The first is when navigating back using the NavController, the header/toolbar from the page I am navigating back from, reappears over the top of the view I have navigated to. This only happens once the nav transition has finished. What I’m left with is the page I have navigated back to, with the toolbar of the other page on top. Once i click on the toolbar buttons, it disappears and the correct toolbar shows.

The second problem is to do with a mismatch of screen alignment to the actual app container. When navigating forward using the router or the NavController, the alignment goes upward. If I inspect with safari and i hover over the tag, the highlighted area on the phone is completely out of sync with the app being displayed:

As you can see here, the header and toolbar are being displayed but without the title showing up, and the highlight area is from my hovering over the in the inspector. There are no global of component styles that would cause this, and it happens in very random areas - only from navigation, which leads me to believe something in the navigation is causing it.

The particular page above can be reached by 2 routes, one requires 3 page navigation forward methods, and the other is from just 1 - strangely, when only one page navigation is before this, it works fine and never misaligns- but always does in the other case.

Any ideas on what on earth is going on?