bug: modal closing animation issue if keyboard open

[tetkosimi]

Bug Report

Keyboard resize the ion-app element, when keyboard opens.
When you have an opened ion-modal with keyboard, and you close the modal, both keyboard and modal close animations are running in same time.
Keyboard plugin will revert back the height of ion-app after close animation have been finished, and the ion-modal have absolute position so modal animation will end at bottom of ion-app what have height [screen height]-[keyboard height] in this time.

Ionic version:
[x] 5.0.x

Current behavior:

Expected behavior:
Nice animation even when keyboard is closing.

Steps to reproduce:

• Open ion-modal
• Open keyboard
• Close modal with this.modalCtrl.dismiss();

Other information:
I think, fixed position for modals may resolve this issue.
All types of modals are affected.

Ionic info:

Ionic:

   Ionic CLI                     : 6.1.0 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.0.4
   @angular-devkit/build-angular : 0.900.1
   @angular-devkit/schematics    : 9.0.1
   @angular/cli                  : 9.0.0
   @ionic/angular-toolkit        : 2.1.2

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : ios 5.1.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 29 other plugins)

Utility:

   cordova-res (update available: 0.9.0) : 0.8.1
   native-run                            : 0.3.0

System:

   ios-sim : 8.0.2
   NodeJS  : v12.13.1 (/usr/local/bin/node)
   npm     : 6.12.1
   OS      : macOS Catalina
   Xcode   : Xcode 11.3.1 Build version 11C504

[roman-rr]

@tetkosimi I catch similar issue. No clear solution, but solved with timeout:

if (this.keyboard.isVisible) {
  setTimeout(() => this.modal.dismiss(), 150);
} else {
  this.modal.dismiss();
}

[realnapster86]

I encountered a similar issue on modals with custom height and width. The closing animation shows only for the height of the modal. Its easy to reproduce by setting --height: 50% on the modal. For now I have opted to not show the animation at all using animate: false property.

[realnapster86]

This is fixed with 5.0.5 version
modal: leave animation transitions modal completely out of viewport on ipad (#20702) (22d5256), closes #20697

[tetkosimi]

Confirmed, this have been fixed in 5.0.5.
Thanks!

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