Ionic-framework: Ionic4: Ion-modal dismiss has a lag.

[stripathix]

If you open modal and then dismiss it and then open it again suddenly by clicking on button then sometimes click event of a button by which modal is opened is not triggered. This happens because z-index of the ion-modal element is high and after .dismiss() it remains in DOM for few milliseconds in that time if the user again taps on a button to open modal then that event is not triggered. Causing a feel like a lag.

The temporary hack I used is to set z-index of ion-modal as -1 before calling dismiss. But I think ionic can definitely do something better to make it smoother.

One more point is that there is a little lag when the first time a modal is opened. But after the first time, it is pretty fast. I am not sure why that is happening. Any solution for that?

I am using:
<script src="https://unpkg.com/@ionic/[email protected]/dist/ionic.js"></script>

[godenji]

Modal animation performance is unpredictable in Ionic v4, definitely not at the level of Ionic v3 where transitions are always smooth without any lag whatsoever.

Generally speaking transitions (modal or otherwise) need work in v4.

[stripathix]

I have noticed same issue with actionsheets and popovers also.

[stripathix]

Any update on this?

[manucorporat]

IS this still an problem in last beta?

[stripathix]

Looks lot better now. One issue is that first time when modal loads there is a lag. Maybe this is because that chunk file related to modal is loaded when it is used. Can that be solved anyhow?

I am using VueJS + Ionic 4

[manucorporat]

@stripathix that's lazy loading! you can probably mitigate this issue by including <ion-modal-controller> in your markup at the root of your project, as direct children of ion-app. So it's downloaded as soon as your app boots up.

A long delay might also mean, your server is responding with a high latency, you should check that out too!

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