Passive Listener Violation In Chrome

[stefanpenner]

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

Our event dispatcher always attaches this events, regardless if they are used or not: https://github.com/emberjs/ember.js/blob/master/packages/ember-views/lib/system/event_dispatcher.js#L62-L65

We should most likely lazily install them as they are required.

[evanaj]

I faced the same issue. How can I solve it?

[wellington1993]

I have the same problem:

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

[wellington1993]

Is it a related question: #12783 ???

[krisselden]

@wellington1993 you can remove events via https://emberjs.com/api/classes/Ember.Application.html#property_customEvents and if your app needs these events use passive listeners for mousewheel, touchstart, touchmove (only events that can block scroll via preventDefault matter for passive listening), you add on didInsertElement and remove on willDestroyElement of a component.

[pixelhandler]

@evanaj @krisselden @stefanpenner @wellington1993 is this still an issue, perhaps we should close; what do you think?

[btecu]

@pixelhandler this is still an issue with the latest version:

[st-h]

It seems that ember >= 3.11 now provides a way to add passive event listeners via the on modifier: https://blog.emberjs.com/2019/07/15/ember-3-11-released.html

[rwjblue]

Confirm, though it doesn't yet avoid adding the non-passive listener to body (really the rootElement).

[filipe-torres]

My approach to solve this problem was add event on didInsertElement and remove them on willDestroyElement lifecycle functions, setting {passive: true} as last parameter when adding the event listener:

export default Component({

  didInsertElement() {
    this._super(...arguments);
    this.functionName = () => { 
        // function body
    };
    this.element.addEventListener('wheel', this.functionName, {passive: true});
  },

  willDestroyElement() {
    this._super(...arguments);
    this.element.removeEventListener('wheel', this.functionName);
  }
});

[pzuraq]

@filipe-torres this is essentially what {{on}} does, and we highly recommend you use the modifier over component lifecycle hooks, since those no longer exist in the Octane programming model.