Performance issue with Ionic Card Modal with iOS style running on Android

[AE1NS]

Just wanted to know, if I am the only one who has huge performance issues when using the Ionics Card Modal in ios mode on an android device? I really like this stacked modals in ios style and decided to use it in android. I have two different projects and the modals are running flawless when I open the app in a browser on my native android device. But when I open it as native app, the opening animation and drag actions of the modal are really laggy.

[mlynch]

This sounds like #3899

Do you have some accessibility-related apps or services installed? There's a known issue the Chrome team is investigating related to this.

EDIT: I see you were already participating in that issue. Do you think this is something new or the same issue?

[AE1NS]

I asume that this issue is not related to the accessibility issue, as I have disabled the accessibility tools and the rest of the application is running fine.

This issue has been happening for a longer time now for me and I always checked if ionic updates fixed it or anyone else created an issue for it, but either noone uses the ios stacked cards in native android, or for whatever reason I am the only one with this issue. I can't even explain it to myself why some css transitions should cause that behavior.

The more content the modal contains, the worser it gets, but its also noticable with less content. And as I mentioned, its runny flawless when you open it in Android inside chrome instead of the native app, so it maybe seems to be related to the webview.

[AE1NS]

Edit: Removed example videos here. See new ones below.

Device: Samsung Galaxy S20+ running with 120HZ (all accessibility tools off)

Its often difficult to show it with this capture videos, because it feels worse than it looks.

The web version feels much smoother overall, but I know that it depends on the webview and thus to the google team.

I have another case where I cant provide a screen video, where its much more laggy when opening and dragging as in the example above (maybe because its more content inside and also a form), but its running smooth in browser.

I love the power of angular + ionic + capacitor (in our case), but if only the google team would spend more attention to the webview performance, it would make everything so much easier.

[AE1NS]

Another example with activated touch point. Its clearly visible how unresponsive the modal is opening and moving on touch input.

Native

native.mp4

---

Web

web.mp4

[RobSchilderr]

I asume that this issue is not related to the accessibility issue, as I have disabled the accessibility tools and the rest of the application is running fine.

This issue has been happening for a longer time now for me and I always checked if ionic updates fixed it or anyone else created an issue for it, but either noone uses the ios stacked cards in native android, or for whatever reason I am the only one with this issue. I can't even explain it to myself why some css transitions should cause that behavior.

The more content the modal contains, the worser it gets, but its also noticable with less content. And as I mentioned, its runny flawless when you open it in Android inside chrome instead of the native app, so it maybe seems to be related to the webview.

It is not only related to accessibility indeed, the performance on Android is much lower, one can clearly notice when working with @capacitor/google-maps and see its performance when adding/removing markers. I hope Google will work on the issue and the Capacitor/Ionic team will join us supporting.