Ionic-framework: bug: iOS back transition with ion-footer

[Spinnenzunge]

Bug Report

iOS back transition with ion-footer in child page (active page that has the back action) has a styling error in the shadow overlay on the page behind it.

Ionic version:


[x] 5.0.7

Current behavior:
iOS transition on from child back to parent page is bugged if child page has an ion-footer element and parent page does not.

Expected behavior:
iOS transition works with and without ion-footer element

Steps to reproduce:
Create a parent page without a footer that routes to a child page with a footer. On the back navigation on iOS the footer renders a area that has not a proper shadow because the transition expects the parent page also to have a footer

Related code:

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>Language</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <p>whatever</p>
</ion-content>

<ion-footer>
  <ion-toolbar>
    <div class="ion-padding">
      <ion-button expand="block">Send</ion-button>
    </div>
  </ion-toolbar>
</ion-footer>

Other information:

Ionic info:

Ionic:

   Ionic CLI                     : 6.1.0
   Ionic Framework               : @ionic/angular 5.0.7
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.1.2

Cordova:

   Cordova CLI       : 9.0.0 ([email protected])
   Cordova Platforms : ios 5.1.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 7 other plugins)

Utility:

   cordova-res (update available: 0.12.1) : 0.9.0
   native-run (update available: 1.0.0)   : 0.2.9

System:

   Android SDK Tools : 26.1.1
   ios-deploy        : 1.9.4
   ios-sim           : 8.0.2
   NodeJS            : v12.11.1
   npm               : 6.13.7
   OS                : macOS Mojave
   Xcode             : Xcode 11.3.1 Build version 11C504

[liamdebeasi]

Thanks for the issue. Can you provide a repo with the code required to reproduce this issue?

[Spinnenzunge]

Sure i setup a repo from a ionic tabs starter.
https://github.com/Spinnenzunge/ionic-footer-bug

Check the first tab child / back to parent transition. If you drag it with the mouse in iOS mode you can see it best. The header section has the same behaviour. The transition just looks kinda odd if you come from a page with header / footer to a page without header / footer.

[liamdebeasi]

Thanks for the issue. Can you try the following dev build and let me know if it resolves the issue:

npm i @ionic/[email protected]

[Spinnenzunge]

Seems to work for the footer with that dev build. I updated the repository and removed the header from the parent page, there we kinda have the same problem as with the footer.
Could this be fixed as well? Or would this generate different problem with header transitions?.

[liamdebeasi]

Yeah doing that for the header would cause issues with the transition since you would see the transition shadow under the back button. Doing that kind of "full view" transition seems to be a separate option for transitioning and is likely something we could add as a feature in the future.

[Spinnenzunge]

Sounds reasonable, I am happy with the footer transition fix then :)

[liamdebeasi]

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic/pull/21095, and a fix will be available in an upcoming release of Ionic Framework

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