Footer Visible During Navigation Transition

[saniyusuf]

I have a footer placed in a View I am navigating into. As soon as I start the navigation, the footer in the view being pushed to is seen even before the transition has ended. So you have a case where the footer is seen for some few milliseconds then the body in the header and content is then seen. See URL below for GIF

http://www.giphy.com/gifs/3oriNV1H6FAxdo5co8

Below is my Ionic Infor result.
Your system information:

Cordova CLI: 6.3.1
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.11
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.1.0-beta.1
ios-deploy version: 1.8.6
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v5.10.1
Xcode version: Xcode 7.3 Build version 7D175

[manucorporat]

Can you share some code to reproduce the issue?

[infinnie]

The same problem here in iOS mode.

[infinnie]

@manucorporat I think that the link above to the GIF image illustrated the problem well.

[manucorporat]

Well, there are many issues to be fixed, a lot of them are not real bugs but using the API incorrectly.
I still have to reproduce the issue to fix it, illustrate is not enough.

Some source code to reproduce it will increase the chances to get this solved as soon as possible.

[biesbjerg]

I'm seeing the same thing after upgrading from beta 11 to rc1.

To reproduce:

Navigate from a page to another page using NavController. Destination page should use this template.

<ion-header>
    <ion-navbar color="brand">
        <ion-title>Footer Transition</ion-title>
    </ion-navbar>
</ion-header>

<ion-content>
    Content
</ion-content>

<ion-footer>
    This is visible during nav.push(Page) transition
    and does not disappear until transition has completed
</ion-footer>

EDIT: I think it's some kind of z-index issue. If I navigate to yet another page, from the page that has a footer, the transition looks okay forward and back. It seems to be a problem only if you navigate "back/up" the component tree, if that makes any sense.

EDIT 2: Is only an issue in iOS mode

[biesbjerg]

Same issue reported herr: #9121

[joaoveiga]

Try to wrap your code inside the ion-footer in a ion-toolbar, just like this:

<ion-header>
    <ion-navbar color="brand">
        <ion-title>Footer Transition</ion-title>
    </ion-navbar>
</ion-header>

<ion-content>
    Content
</ion-content>

<ion-footer>
    <ion-toolbar>
        This is visible during nav.push(Page) transition
        and does not disappear until transition has completed
    </ion-toolbar>
</ion-footer>

[royipressburger]

@manucorporat I can also see this problem with search bar inside a header. Should I open new task?

[dylanvdmerwe]

Similar issue here #9606

[jgw96]

A user has submitted a PR that should fix this issue here #9597 . I will test this PR.

[jgw96]

big thanks @lh4111!

[Flixt]

It seems wrapping things into a <ion-tooblar> is indeed a workaround.
I additionally needed to remove the padding of the <ion-toolbar>

.no-padding {
  padding: 0;
}

<ion-footer>
  <ion-toolbar class="no-padding">
    <!-- animated footer content here -->
  </ion-toolbar>
</ion-footer>

[jgw96]

Hello all! After some thought, we are going to close this issue as an ion-footer should always have its contents wrapped in an ion-toolbar. Thanks for using Ionic!

[haifzhan]

still have the issue even ion-toolbar added

[aoe2rtw2]

Still seeing it even with ion-toolbar as well. Tried removing the padding too but no luck.

[mishanya14228]

Adding a div wrapper right after ion-footer tag helped me

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.