bug: Modal with option animated: false does not display on iOS

[rossholdway]

Bug Report

Ionic version:

[x] 4.x

Current behavior:
On the latest version of Ionic v4.9.0, create a modal with the config option animated: false. The modal will not display on iOS Safari / WKWebview / Capacitor, but will in other browsers.

Expected behavior:
I would expect the modal to display without any animation.

Steps to reproduce:
On master open the ion-modal basic test and add animated: false to the createModal function. Open the test URL http://localhost:3333/src/components/modal/test/basic in Safari on IOS (a simulator works - iOS 12.2 or 13). Click "Present Modal". The modal will be inserted into the DOM, but won't display :(

From initial investigation...
The .modal-wrapper on iOS seems to have a translate3d(0,100%,0) transform on it to prevent flickering https://github.com/ionic-team/ionic/blob/e27962dcaf98bfb1f4c026df5a8c525ee3773261/core/src/components/modal/modal.ios.scss#L15

When you disable the animation with 0ms https://github.com/ionic-team/ionic/blob/e27962dcaf98bfb1f4c026df5a8c525ee3773261/core/src/utils/overlays.ts#L209 on iOS Safari it takes the translate3d into account, causing the modal to be hidden off screen.

Related code:

const modal = await this.modalController.create({
  component: Tab2Page,
  animated: false
});
await modal.present()

[liamdebeasi]

Thanks for the issue. Can you give the following dev build a try and let me know if it resolves your issue?

If using Ionic Angular: npm i @ionic/angular@4.10.0-dev.201909061209.c959d75
If using Ionic Core: npm i @ionic/core@4.10.0-dev.201909061209.c959d75

Thanks!

[rossholdway]

@liamdebeasi Thanks! That fixes it 👍

[liamdebeasi]

Thanks for the issue. This issue has been fixed via #19287 and will be available in the next release of Ionic.

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