Components: [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive.

[jvbianchi]

Bug, feature request, or proposal:

In chrome 58, warnings started appearing on console:

zone.min.js:1 [Violation] 'readystatechange' handler took 190ms
zone.min.js:1 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive.
zone.min.js:1 [Violation] 'load' handler took 517ms

What is the expected behavior?

Don't get this warning on console:

What are the steps to reproduce?

Just running the template plunker you get this console warning.
Console must be in the verbose level

Plunker: https://goo.gl/DlHd6U

Which versions of Angular, Material, OS, browsers are affected?

Chrome 58.0.3029.81
Mac OSX 10.12.4 (Sierra)

[jackvial]

Looks like it's related to the new event listener options. More on it here and here

There is no a new options object that can be passed to the addEventListener. The warning is saying the passive event listeners on the page should be passed the {passive: true} option to improve scroll performance. document.addEventListener('touchstart', handler, {passive: true});.

These warnings are only performance recommendation so it's not really something to get too worried about, although performances improvements are always good.

[tarlepp]

Using https://github.com/zzarcon/default-passive-events will remove some of those violation warnings, but there is still some left.

[acronHou]

what about "bind"?

[Zwilla]

I can not understand why this is closed, the problem always exist and only this:
https://github.com/zzarcon/default-passive-events
solved my problem, the above problem
thx to @tarlepp

[Dunos]

Yup, can confirm that this is still happening

[FredvanRijswijk]

Yes still getting this warning:

zone.js:1666 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive.

[mackelito]

@andrewseguin are there any recommended solutions for this issue?

[micahwood]

This seems to have gotten worse with beta 12. Displaying a dialog used to appear instantly, now it takes close to 2 seconds for the dialog to appear.
[Violation] 'click' handler took 1690ms

The following message is logged about 1200 times from the time I click the button to display a dialog and it appearing. On Material beta 11 it was not logged at all while displaying the dialog.
[Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive.

It looks my specific issue is being caused by a mat-autocomplete with a large data set. I'll create a plunker to demonstrate it.

[micahwood]

Here is a plunker showing the issue with slowing down substantially with large data sets. I added a button to display the autocomplete to make it easier to see the slow down. Also if you open the dev tools and set logging to verbose you can see how many event listeners are being created. It looks like it creates two listeners for each item that is added. I will create a new issue for this.
https://plnkr.co/edit/QhlHy7FrlvQbDeRfncCo?p=preview

[crisbeto]

FWIW, those touchstart handlers were added to accommodate the ripple effect on buttons. They have since been removed because they were problematic.

[tarlepp]

this is still happening, should we create a new issue about this, because this one is "closed" when it really isn't resolved at anyway ?

Or @casesandberg did you close this issue by mistake ?

[d3viant0ne]

@tarlepp - This should be resolved with #7557 ( doesn't happen on master ) so it should just be a matter of waiting on the next tag or running on a nightly build if it's absolutely critical.

[debslord]

Thanks @d3viant0ne do you know when this is likely to be released?

I'm getting a lot of [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' events appearing in the console and my forms are really slow to load.... It reports back that
[Violation] 'click' handler took 17807ms

Keeping my fingers crossed that #7557 resolves these issues!

[d3viant0ne]

I'm running on "@angular/material": "git+https://github.com/angular/material2-builds#2.0.0-beta.12-62b149f", & the associated CDK & the problem no longer exists.

That build is stable & works with Angular 5.x, at least within the scope of what I am doing. material2-builds are static if you target the hash, really no different than a published build in the strictest sense.

[debslord]

Thanks again @d3viant0ne

Upgraded my project to Angular 5 and the build you're on - weirdly still an issue for me.

This occurs 8000+ times - [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event.
[Violation] 'click' handler took 18268ms
[Violation] 'load' handler took 477ms

As a result the form takes around 20 seconds to load - same as @micahwood plunker as he said the larger the dataset the more event listeners

[d3viant0ne]

@debslord - I'll take another look with the filters off. 90% sure the touchstart stuff is no longer an issue ( on my side at least )

[debslord]

Thank you! I will see about implementing default-passive-events I might have to result to that fix instead

[debslord]

I think my issues are probably more around the autocomplete issues mentioned in #5113 and #7749
So it might be slightly different to the issues you were getting @d3viant0ne

Implementing default-passive-events doesn't work either as there seems to be an issue around click events already having this set by default and so it throws an error instead and although the toughstart issues aren't displayed in the console the click still takes much too long. I'm hoping the other two issues will resolve this. Thanks for you help.

[lexyfeito]

Please when is this going to be fixed, this is slowing down my app's performance like crazy. Thank you

[vegarda]

This is back in 5.0.0-rc.3(?)

[olaf89]

I have same issues with 5.0.0-rc.3

[crisbeto]

It should be fixed by https://github.com/angular/material2/pull/8719.

[lexyfeito]

@crisbeto which release will this be in?

[gyx8899]

I find one solution to solve this warning. (It works fine for me)

Added-non-passive-event-listener-to-a-scroll-blocking-touchstart-event-Consider-marking-event-handler-as-passive-to-make-the-page-more-responsive-by-visionfortech

jQuery.event.special.touchstart = { setup: function( _, ns, handle ){ if ( ns.includes("noPreventDefault") ) { this.addEventListener("touchstart", handle, { passive: false }); } else { this.addEventListener("touchstart", handle, { passive: true }); } } };

[fertandil87]

it's fixed in 5.0.0-rc.2, and appear again in ">= 5.0.0-rc.3"

[surbhi290391]

i am facing this same issue in recaptcha_en.js s can anyone tell me ow can i enable passive=true for recaptcha

[phil123456]

sept 2018 and still hapenning
angular: ^5.2.0
ng CLI: ~1.7.4
tslint: ~5.9.1
typescript: ~2.5.3
webpack: ~3.11.0

[crisbeto]

@phil123456 which Material components are you using on the page that is logging out the warning?

[phil123456]

sorry I did not realize it was "material" project

[brecko]

I was having the same issue. It turned out to be the Chrome Extension 'Logitech Smooth Scrolling'. When I turned it off, I no longer saw the violations in my Angular 6 Material app.

[krokofant]

The default-passive-events workaround is horrible, it messes up the available functionality of existing or future eventhandlers that want to preventDefault() an event.

[Gonzo2O28]

Any updates on this issue?

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}