nativescript-angular: ActionBar + Page transition are causing content displacement (iOS)

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.

with-animation

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

without-animation

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.

About this issue

Original URL
State: open
Created 6 years ago
Comments: 20

Most upvoted comments

@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

NickIliev on Jun 13, 2018

Experiencing this same issue with Nativescript Vue as well.

paul-muckypuddle on Nov 26, 2018

Same here.

nativescript-angular: 6.06 tns-ios: 4.1.1

First page hides the action-bar: this._page.actionBarHidden = true;
Second page has normal action-bar with content on page
When navigating from first page to second: the content will be pushed under the action-bar
when navigating back with swipe, the UI of the action bar on second page break and is suddenly white

Can reproduce under iOS 10 and 11.

ThunderAnimal on Jul 27, 2018

@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.

jeremypele on Jun 12, 2018

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

Navigate to the second page (without transition)
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.

header-issue

jeremypele on Jun 14, 2018