Ionic-framework: Handling of 'touchstart' input event was delayed for X ms due to main thread being busy

[tinquang]

After upgrade to beta 11, Navcontroller pop() method have to be called few times to make it works. And when the page go back, browser show this message:

ui-event-manager.js:27 Handling of 'touchstart' input event was delayed for 102 ms due to main thread being busy. Consider marking event handler as 'passive' to make the page more responive.
zone.js:421 Handling of 'touchstart' input event was delayed for 102 ms due to main thread being busy. Consider marking event handler as 'passive' to make the page more responive.

[tinquang]

Before upgrade to beta 11, I was using [email protected]

[jgw96]

Hello! Thanks for opening an issue with us! Would you be able provide a repo with a minimal example using one of our starters? (generated with ionic start test-app --v2) ? Thanks for using Ionic!

[jgw96]

After looking at this issue some this is actually the correct warning you should get if you are doing heavy computation while trying to navigate. I would check that you are not making alot of http requests, looping through a bunch of data, or anything else that would lock up the main thread. Since this is not an ionic issue i will be closing this issue, but feel free to comment if you have any questions!

[tinquang]

Thanks for your answer, my source or destination page does not make any heavy computation, these pages works good with old nightly version and only appears when I upgrade to beta 11, but it's weird that not all my pages get this problem.

[by12]

I had also the same issue. In my case I get this warning when I try to call the event before the page load completely. Once page load all assets and contents then I don't have this warning.

[mubasshir]

I'm getting

Handling of 'touchstart' input event was delayed for 1470835276887 ms due to main thread being busy. Consider marking event handler as 'passive' to make the page more responsive.

does it mean I'm doing a lot of computation? BTW is there any way I could identify where this computation is going on?

[jgw96]

Hello @tinquang @mubasshir @by12 ! Are you guys all using the ionViewLoaded event?

[tinquang]

yes @jgw96 , I'm using ionViewLoaded on most of my pages because I want all the computation only start after the page transition completed.

[jgw96]

@tinquang would you mind moving it to ionViewDidEnter? This is actually the event that is fired after the transition is completed. ionViewLoaded is fired before this happens. Thanks!

[tinquang]

Sorry @jgw96 , I just checked my code, I am using ionViewDidEnter, not ionViewLoaded

[mohessaid]

In my case I receive this warning when I try to load embedded youtube video in a scenario like this :
Send request to the server to retrieve the courses --> Fetch the course lectures and for every lecture fetch the external resources --> Inside the a lecture if the external resource is a youtube url then create an object for this resource like this :

$scope.video = {
     loadUrl = function(){
            return $sce.trustAsResourceUrl(module.contents[0].fileurl.replace(/(watch\?v=)/, "embed/"));
     },
     youtubeurlexist : true
};

Everything works fine but when you use the mouse wheel in a browser ( which is not a problem because this is an android app) this warning shows.

[vishal5308]

I guess this has something to do with new feature introduced in chrome version 51+.
https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md

[Maulikzota]

Handling of 'touchstart' input event was delayed for 1474461065313 ms due to main thread being busy. Consider marking event handler as 'passive' to make the page more responive.

[200even]

@jgw96 any update on this issue? We are also experiencing this with chrome 51/webKit.

[jgw96]

Hello @200even would you be able to provide a small repo that i can use to reproduce this issue? Thanks!

[200even]

@jgw96 I created a plunker at https://plnkr.co/edit/zersmw?p=info. To reproduce the issue, using chrome open developer tools and toggle the device toolbar. Then try to expand the select box.

[cjaeriksson]

Any updates on this ?

[GabrielStetco]

+1

[htmlgames]

Just a thought, is this behavior due to passive event listeners feature that has recently landed in Chrome (and possible others)?

Some more info here:
https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md

[200even]

This bug does seem to be related to the passive event listeners. I've applied the data-tap-disabled directive to the select box, and that fixes the problem for most devices by bypassing the Ionic tap events.
http://ionicframework.com/docs/api/page/tap/

We are still not able to get the select working on Nexus phones however.

[darron1217]

I'm struggling with this issue too...
This issue makes me crazy :(

[hewz]

Any updates on this ?
I still having this issue in the latest ionic v1.x. Pages go back and this warning comes out, then the whole view lose response.

[64jcl]

We are having the same problems.

deviceready has not fired after 5 seconds.
DEVICE READY FIRED AFTER 2180 ms

We also seem to have some issues with device ready being fired before SQLitePlugin is actually ready and db is open. For some reason a promise fails on us on startup with the classic "Cannot read property 'apply' of undefined". Have been trying to track down if we pass some function that is not bound or something but cant really find that anywhere. We also notice "OPEN database: _ionicstorage - OK" shown twice in the output, is that normal? Shouldnt this open just once on the first usage of @ionic/storage? One of those OPEN outputs in the log happens just before the Promise fails.

[tshrjn]

I'm also struggling with this issue.

Handling of 'touchstart' input event was delayed for 1484844133945 ms due to main thread being busy. Consider marking event handler as 'passive' to make the page more responsive.

[64jcl]

I see this issue was closed, although it seems to have been done on an assumption that this is the fault of the user having too much computation in one of their event handlers or something. To me this seems to be some core event handler that the programmer does not control that suddenly locks up the main thread and then we get these warnings now and then. I have noticed among other things that Angular2 does not like zero values for *ngFor or when binding variables. For example would totally lock up or crash the whole event handling if datavar for some reason was set to null. The app would look like it was still running, so e.g. left menu could be pulled out and even tabs work, but none of your own action buttons/handlers or clicks on lists would respond at all. Clicking something that was supposed to push on a new page would not work if the page had this problem.

More worryingly there was no exception or error log on the console to indicate that this was happening, which sort of indicates that its a core failure of something that was not supposed to ever happen. So if you have issues where the app stops responding to clicks and other things, consider going over any model variable used for your components and figure out. Perhaps this has been fixed in later Angular versions? The one we used was 2.1.1. I see the latest ionic start apps uses 2.2.1, while I also see that Angular is already on version 2.4.4 .

[64jcl]

Some more info on this problem here. The "touchsmart" passive event handlers thing is then likely the new feature that is still not supported by ionic2 or its underlying angular2 event handling? So e.preventDefault() calls is then likely the culprit here? I noticed these popping up every time I had those null model value issues as described in my post above. Perhaps the switch to a new page is what fails due to errors in the page and that locks it up in some infinite loop?

http://stackoverflow.com/questions/37721782/what-are-passive-event-listeners

[trinvh]

I had the exact problem like @64jcl. When the warning is shown in developer tool, no action/click happen on the page that had this problem.

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