Modal present/dismiss slow to process

Ionic Framework ionic-v3
1

I have a small list of items, and tapping each item will display a modal. There is very noticeable delay (~600ms) from when my doModal function is fired and when the modal actually shows up on screen. doModal() simply sets up a modal and makes the call to present it. I’ve been looking at the Timeline views in Chrome and Safari, and both indicate that “drainMicroTaskQueue” is taking quite a long time to display a fairly simple modal. There is a smaller, yet noticeable delay of about 300ms when dismissing a modal. The modal has very little HTML and CSS, so painting isn’t a major issue here.

This is tough to reproduce and give a running example of since this issue really only occurs when compiling and running the app on a phone.

Does anyone have any performance tips when it comes to displaying/dismissing modals? I have a feeling this is more of an Angular 2 concern, but I’m hoping maybe someone could provide some guidance.

2

I was having (maybe?) the same problem.

Turns out this is a 300ms delay enforced by the browser itself.

Switching from (click) events to (touchend) made the lag disappear, but I’m not sure if this is an acceptable final solution or not. Good enough for now, anyway.

Hope this helps!

3

I ended up using (touchend) as well as the “tappable” property, and that seemed to do the trick!

Source: http://ionicframework.com/docs/v2/faq/#click-delays

Thanks for your help!