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.

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

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

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

it’s fixed in 5.0.0-rc.2, and appear again in “>= 5.0.0-rc.3”

Yup, can confirm that this is still happening

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 ?

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.

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

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.

I have same issues with 5.0.0-rc.3

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

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 }); } } };

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

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.

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

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.