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.

[ThunderAnimal]

Same here.

nativescript-angular: 6.06 tns-ios: 4.1.1

1. First page hides the action-bar: this._page.actionBarHidden = true;
2. Second page has normal action-bar with content on page
3. When navigating from first page to second: the content will be pushed under the action-bar
4. 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.

[t3hmrman]

Just ran into this -- I removed flat from my <ActionBar>s and things got much better, along with removing all places where I specified transition when navigating

[mimamo10]

I'm having the same issue as t3hmrman, putting flat=true on the ActionBar displaces the content below. I'm not transitioning anywhere.

The same thing happens if, instead of setting 'flat', I set ios.controller.navigationBar.translucent to false.

[mimamo10]

... I'm not using Angular, just javascript.

[felicks]

Is there a solution for this issue? I'm using the flat attribute to remove the color correction from ios

[paul-muckypuddle]

Experiencing this same issue with Nativescript Vue as well.

[felicks]

If you are using a ScrollView put it inside a StackLayout. This resolved the issue for me!

[victordcp]

Same problem here, I'm using nativescript/angular and iOS 12...

[nmongiya]

Not only on ios 12; it can be reproduced on ios 11 as well.

[shmatul]

+1 happens for me as well

[stevenspiel]

like @t3hmrman and @mimamo10, the issue is only present when flat=true is set (I'm using NS Core).

[t3hmrman]

hey @stevenspiel agreed -- I solved it by just removing flat IIRC. I might have also shuffled around some views (maybe the ScrollView and some layout) as @felicks suggested.

[bl00djack]

I don't know if anyone has found a proper solution for this yet. For me, I added a marginTop="1" in <ScrollView marginTop="1"> and it worked. However, it leaves a 1px of space between the ActionBar and ScrollView which you can probably cheat depending on the color/styling of your app. This is my full code

<template>
  <Page>
    <ActionBar title="Title" flat="true">
      <NavigationButton visibility="collapsed" />
    </ActionBar>
    <ScrollView marginTop="1">
        <!--- content -->
    </ScrollView>
  </Page>
</template>

[pekevski]

Removing flat=true on the ActionBar DOM element doesn't fix this issue for me. The only thing that correctly aligns the page is removing the animation options from the router.navigation