Ion footer overwrites previous footer for a second

[thiagorobertodc]

Ionic version:

[x] 4.7.1
[ ] 5.x

I'm submitting a ...

[x] bug report
[ ] feature request

Current behavior:
Ion footer of a page stays on view when back button pressed, vanishing only after a few seconds.

Expected behavior:
Footer should transition back along with the other page's elements.

Steps to reproduce:

Related code:

insert short code snippets here




<ion-footer class="login-footer">
    <ion-row>
        <ion-col class="footer-links">
            <ion-text [routerLink]="['/register']" class="ion-float-start register clickable">Cadastre-se</ion-text>
            <ion-text [routerLink]="['/recovery-password']" class="ion-float-end forgot-pass clickable">Esqueceu a
                senha?
            </ion-text>
        </ion-col>
    </ion-row>
</ion-footer>

CSS:

ion-footer {
  background: linear-gradient(88.45deg, #FF9009 -18.14%, #FFC700 165.33%);

  &.footer-md::before {
    background-image: none;
  }
}

.login-footer {
  height: 5vh;
}

Other information:

Ionic info:

Ionic:

   Ionic CLI                     : 5.4.16
   Ionic Framework               : @ionic/angular 4.11.10
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.2.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.1.0, browser 6.0.0
   Cordova Plugins   : not available

Utility:

   cordova-res                          : not installed
   native-run (update available: 1.0.0) : 0.3.0

System:

   NodeJS : v10.16.3 (C:\Program Files\nodejs\node.exe)
   npm    : 6.9.0
   OS     : Windows 10

[ionitron-bot]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please provide a reproduction with the minimum amount of code required to reproduce the issue. Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

For a guide on how to create a good reproduction, see our Contributing Guide.

[thiagorobertodc]

https://github.com/thiagorobertodc/footer-bug here's a link for code reproduction.

Steps to follow:

0. Open the Ionic Lab on "iOS mode"
1. Click on "Cadastrar-se" on the home screen footer.
2. Click on the back button of the Register page header.
3. Observe the footer transition bug.

[liamdebeasi]

Thanks for the follow up. I am going to close this as this is not a bug in Ionic Framework. There are a few things you need to do in order for this transition to work properly:

1. Elements inside of ion-footer need to be wrapped in one or more ion-toolbar elements just like in ion-header.
2. Background color should be applied to ion-toolbar via the --background CSS variable, not by applying the background color to ion-footer.
3. Apply the custom-double-padding-horizontal class to the ion-toolbar, not ion-footer.
4. Remove the height: 12vh; from ion-footer. Apply padding to the ion-toolbar or ion-button if you want more spacing around the button.

In general, components like ion-footer and ion-header are just structural, and should not be used to apply custom background styles or padding. Those should be applied to the inner ion-toolbar components.

[thiagorobertodc]

thanks for the tips, but it still doesn't work.

[liamdebeasi]

Thanks for the follow up. Can you be more specific as to what does not work?

[thiagorobertodc]

I wrapped footer's button inside toolbar as you suggested. Login's page footer as well with its messages inside a toolbar.

https://github.com/thiagorobertodc/footer-bug here's a link for code reproduction.

Steps to follow:

Open the Ionic Lab on "iOS mode"
Click on "Cadastrar-se" on the home screen footer.
Click on the back button of the Register page header.
Observe the footer transition bug.

[liamdebeasi]

You did not remove all of the CSS I mentioned in #21422 (comment). The following CSS is in global.scss and should be removed:

ion-footer {
  background: #FFFFFF;
  height: 12vh;
}

[thiagorobertodc]

thanks a lot and I'm sorry for the lack of attention. Definitely it was bad using of ionic elements.

[liamdebeasi]

Glad it's working now 😊

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