bug: Buggy modal opening animation in iOS mode.

Bug Report

Ionic version:
[ ] 4.x
[x] 5.x

Current behavior:
When opening a modal in iOS mode, the animation goes diagonally from bottom-right to top-left. See video:
https://www.youtube.com/watch?v=yUgvDoj-D9I

Expected behavior:
The animation should be just vertical from bottom to top.

Steps to reproduce:

  1. Use the sample app in this repo: https://github.com/Fernito69/ion-title-error/ (nevermind the repo name)
  2. Turn on the device mode on Chrome devtools and select an iOS device.
  3. Click on the “go to next page” button.
  4. Click on the “show modal” button.

Related code:
https://github.com/Fernito69/ion-title-error

Other information:
The bug goes away when I remove the <IonPage> wrapper from Page2.tsx, but the ion-modal documentation says “If you need a wrapper element inside of your modal component, we recommend using an <IonPage> so that the component dimensions are still computed properly”, so I guess I’m not doing anything wrong.

Ionic info:
Ionic:

Ionic CLI : 6.11.0 (C:\Users\Feño\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/react 5.5.2

Capacitor:

Capacitor CLI : 2.4.6
@capacitor/core : 2.4.6

Utility:

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

System:

NodeJS : v12.17.0 (C:\Program Files\nodejs\node.exe)
npm : 6.14.4
OS : Windows 10

1 possible answer(s) on “bug: Buggy modal opening animation in iOS mode.