bug: IonModal and page transitions on iOS

[pritamsoni-hsr]

Bug Report

Ionic version:

[ ] 4.x
[x] 5.2.3 React

Current behavior:

when IonModal is open the original page on ios devices should follow ios 13 like design which is working fine on ionic angular.
the page transitions on react aren't super smooth like the are with ionic angular.

Expected behavior:

page transitions and modal should follow the new apple apple design patterns on Ionic React like they works with ionic angular.

Steps to reproduce:

Related code:

insert short code snippets here

Other information:

Ionic info:

insert the output from ionic info here

[ionitron-bot]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please provide a reproduction with the minimum amount of code required to reproduce the issue. Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

For a guide on how to create a good reproduction, see our Contributing Guide.

[roopeshchinnakampalli]

We see the same issue with iOS 14 (Public beta) in Ionic Angular.

[liamdebeasi]

@roopeshreddy That is a different issue. Please see #21613 (comment) for more information.

[pritamsoni-hsr]

@liamdebeasi here is the code
and here is the result I'm getting, and here is the expected behaviour for these two modal page-transition last 4 seconds
Tested it on capacitor 2.3 and ios 13.5

[liamdebeasi]

Thanks! The problem with the modal is that you are not selecting the correct element. You should be passing a reference to IonRouterOutlet to presentingElement. The docs are confusing regarding this usage, so I will make sure it gets updated.

What's the problem with the page transitions? I am not seeing any issues with performance.

[pritamsoni-hsr]

Thanks it'd be really helpful.
For the page transition, you can see a smooth hold and swipe back transition in second video, if you do it slow you can feel it, but in the implementation I try to swipe back and it transition back to the initial page immediately.
Performance is the same in both cases, the first one is being preferred as per apple HCI.

[liamdebeasi]

Thanks. Swipe to go back not working properly is an existing issue (#20904).

[pritamsoni-hsr]

Thanks. I got the modal working, maybe I'll update the docs soon.

[liamdebeasi]

I'm working on a documentation update right now, so I will close this issue out once it merges.

[pritamsoni-hsr]

Thanks

[roman-rr]

@liamdebeasi Does Ionic Framework inherit safari bug with transition, where touchmove return large number for clientX, clientY instead of double ?

[liamdebeasi]

Thanks for the issue. This has been resolved via #21780, and a fix will be available in an upcoming release of Ionic Framework.

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