Google chrome violations related to gridster2

[pedrovsp]

Hello,

Recently I've been getting the following violations on my console:

[Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952

[Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952

Tracking the message, I've ended up finding out that they're caused by my gridster item. I took some time to read about these violations and found out they've been recently implemented in Google Chrome. Checking out the gridster demo I also get these violations.

I've seen a possible solution by adding the {passive: true} option on the event listener declaration, do you think this should be a fix to the next gridster release? If we agree to this I can make the change.

[CollinGraf314]

Yes, this definitely should be added. If you would make a pull request then I can add it in for the next release.

[pedrovsp]

Apparently angular doesn't allow to create passive event listeners with renderer yet. Issue #8866 on the angular repo is currently discussing a possible implementation.
Does anyone see a possible workaround?

[SansDK]

This is quite an old issue, but it still affects me sometimes.
@pedrovsp have you found a workaround in the meantime?
I've read that https://www.npmjs.com/package/default-passive-events could fix the warning, but I haven't tried it myself yet.

[SansDK]

So I tried the default-passive-events package, which does exactly what it says it does, but this throws errors in the Chrome console because event.preventDefault() is then called on passive events.

Guess I'm stuck with the [Violation] messages for now.

[austenstone]

Angular also supports passive event listeners. For example, you can use the following steps to make the scroll event passive.

1. Create a file zone-flags.ts under src directory.
2. Add the following line into this file.

(window as any)['__zone_symbol__PASSIVE_EVENTS'] = ['touchstart', 'touchmove'];

4. In the src/polyfills.ts file, before importing zone.js, import the newly created zone-flags.

import './zone-flags';
import 'zone.js';  // Included with Angular CLI.

5. After those steps, if you add event listeners for the touchstart, touchmove events, the listeners will be passive.