Angular 4 - Added non-passive event listener to a scroll-blocking 'mousewheel' event.

Question

In my Angular 4 Project I get the following warning when I click on a date-picker or a select-option menu, running it in Google Chrome:

[Violation] Added

Answer 1

What is a passive event?

Passive event listeners are a new feature in the DOM spec that enable developers to opt-in to better scroll performance by eliminating the need for scrolling to block on touch and wheel event listeners. Developers can annotate touch and wheel listeners with {passive: true} to indicate that they will never invoke preventDefault. This feature shipped in Chrome 51, Firefox 49 and landed in WebKit. Reference.

Chrome throws the warning ...

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

...when you bind to mouse scroll events, to essentially warn that you may have inhibited scroll performance in your event or disabled default events by making a call to preventDefault().

Chrome also throws the error when you try and still call preventDefault() in a passive event.

Unable to preventDefault inside passive event listener invocation.

Firefox has a similar error for this, however does not seem to throw a warning like Chrome:

Ignoring ‘preventDefault()’ call on event of type ‘wheel’ from a listener registered as ‘passive’.

---

Warning showcase

Run the following snippet and view the Chrome console in Verbose mode.

// WILL throw violation
document.addEventListener("wheel", function(e) {
  e.preventDefault(); // prevents default browser functionality
});

// will NOT throw violation
document.addEventListener("wheel", function(e) {
  e.preventDefault(); // does nothing since the listener is passive
}, {
  passive: true
});

---

Resolving the issue

A similar SO post was made about the implications of this in javascript.

By marking a touch or wheel listener as passive, the developer is promising the handler won't call preventDefault() to disable scrolling. This frees the browser up to respond to scrolling immediately without waiting for JavaScript, thus ensuring a reliably smooth scrolling experience for the user.

Angular has not yet implemented a generic / ease of use solution for this and can be followed here.

However due to the fact that typescript is compiled to javascript, implementing the above snippet in typescript should still negate the violation.

---

Performance Impacts

The violation itself is not at all harmful to application performance, however the contents of your event function could be - and thus is why Chrome throws this warning. Note that this warning is only shown in Verbose console mode and will not be shown to general users.

As far as I am aware, there is no way to disable such warnings as they are generated by Chrome's interpretation of the code at run time.