ActionBar + Page transition are causing content displacement (iOS)

[jeremypele]

Hi,

with the transition to {N} 4.1 and nativescript-angular 6.0, I'm facing some issues coming from navigation animations.

I'm transitioning from a flat actionBar to a "regular" one, and the page is not correctly positionned.

When I'm removing the animation, the position is correct.

Seems like the animation calculations aren't correct.

Another example I have is with a page having a negative marginTop (to display an image under the actionBar). The position is broken when navigating back to this page. All good without the animations though.

[NickIliev]

@jeremypele I have created this test application trying to recreate the issue but to no avail. Can you please provide more information about the codebase used (the type of page transitions, the action bar code, etc.) - you could either modify my own example or directly create a Playground demonstration.

Also, is this happening on a specific iOS version?

[jeremypele]

Using ios 11.4. It actually works correctly when no transition are provided.

this._routerExtensions.navigate('my-page')

but as soon as a special transition is defined, then it breaks

this._routerExtensions.navigate('my-page,  { transition: { name: 'slideLeft' } })

I'll try to update the test app ASAP, but I'm first trying to clean my app to see if removing the custom transitions works for me. Still a bug though

[jeremypele]

@NickIliev Easy to reproduce with a new app. I've updated the seed on this fork => https://github.com/jeremypele/NS-Issues-2018-II/tree/master/nativescript-angular/issue-1377/app

With the transition: the second page got a padding-top white and going back to the first one put the page content under the status bar.

Without the transition it works just fine.

[NickIliev]

@jeremypele thank you for the detailed info. Confirming this one as a reproducible bug on iOS.

Steps to reproduce:

• Use this test app where the first [page has a flat action bar
• Navigate to the second page with transition
• Result: the content of the secondary page is "pushed" vertically. Navigating back also break the UI of the original landing page.

Happening only on iOS. The same will happen if we are navigating from page with ActionBar to page without any ActionBar

Related to https://github.com/NativeScript/NativeScript/issues/5768

[jeremypele]

@NickIliev Another issue, different but can be reproduced on the same demo app.

1. Navigate to the second page (without transition)
2. Start to drag the page to the left to go back but stay on the page

The header is broken and displays the first page actionbar style.

[WouterVanVegchel]

On iOS 10.3 I have a similar issue: when I navigate to a page, the height of the action bar (flat) is ignored; content disappears under the action bar. As soon as I use a button from the keyboard on this page, the height of the action bar is no longer ignored; the content moves down.
This behavior is only on iOS 10.