Ionic-framework: bug: collapsible header: do not animate ion-back-button when not in start slot

Created on 5 Nov 2019  路  4Comments  路  Source: ionic-team/ionic-framework

Bug Report

Ionic version:
[x] 4.x

Current behavior:
When using a collapsible header on the leaving view in combination with an ion-back-button on the entering view which is not used at the default iOS position (start slot) but e.g. in the primary slot as a "Done" button, it is animated, which looks a bit odd because it scales into position out of nowhere.

ezgif com-crop

Expected behavior:
The ion-back-button should only be animated if its used in the start slot.

Steps to reproduce:

  • Create a page with a collapsible header
  • Create another page (also with a collapsible header) with an ion-back-button, but ion-buttons is placed in the primary slot
  • Navigate from page one to two

Related code:

<ion-buttons slot="primary">
    <ion-back-button></ion-back-button>
</ion-buttons>

Let me know if you need an example repository.

Ionic info:

Ionic CLI                     : 5.4.5 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.11.3
   @angular-devkit/build-angular : 0.803.12
   @angular-devkit/schematics    : 8.3.12
   @angular/cli                  : 8.3.12
   @ionic/angular-toolkit        : 2.0.0

Cordova:

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

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   ios-deploy : 1.9.2
   ios-sim    : 8.0.2
   NodeJS     : v12.4.0 (/usr/local/bin/node)
   npm        : 6.11.3
   OS         : macOS Catalina
   Xcode      : Xcode 11.2 Build version 11B52
core bug

All 4 comments

Thanks for the issue. Can you give this dev build a try and see if it resolves the issue?

npm i @ionic/[email protected]

@liamdebeasi Yes its working correctly with the dev build, thank you!

Thanks for checking! I've merged this fix in. It will be available in an upcoming release of Ionic.

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.

Was this page helpful?
0 / 5 - 0 ratings