Plotly.js: Chrome is logging [Violation] errors in verbose console mode

[etpinard]

First reported https://community.plot.ly/t/violation-at-console/4518/7

To see it, open up https://codepen.io/etpinard/pen/ZyLQYy and turn on _Verbose_ mode

The error message points to this line in dragbox.js.

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

Observed in Chrome 59 and 58.

---

Anyone know what this is about?

[rreusser]

I got the sense maybe they just added this to escalate the awareness of this general issue. I think it has to do with whether scrolling bubbles up to the window _and then_ executes the callback or whether it executes the callback _and then_ bubbles up to the window. Presumably it's more expensive UI-responsiveness-wise to block scrolling on your custom callback. Or something. See: https://developers.google.com/web/updates/2016/06/passive-event-listeners

[etpinard]

Related to https://github.com/plotly/plotly.js/issues/1240

[rreusser]

Let's see… this is a pretty good description of how to detect and apply it: https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md

[etpinard]

cc @dfcreative , which might know what this is about.

[efaden]

Did this ever get fixed...? My events are crashing when I try to perform some logic... I just get TONS of events.

[etpinard]

@dfcreative you're going for this?

[brian428]

Any thoughts on getting this fixed? We're showing multiple charts on the screen at once and these non-passive listener violations are flooding the console.

FYI, doing this is explained in detail at: https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md

[etpinard]

Unfortunately, this ticket fell off our short-term priority list. We'll gladly accept PRs from whoever is comfortable for the specs mentioned above.

In the meantime, the only workaround I can propose is to turn off Chrome's verbose logging level.

[etpinard]

Interesting report in https://community.plot.ly/t/scrollzoom-doesnt-work-in-chrome/7356 that might be related to this ticket.

[dy]

I am not sure we can fix that. In both cases where we attach event listener (scrollZoom and touch panning), we need it to block screen scrolling, therefore we cannot make it passive. In fact, the scenario of panning/zooming is explicitly explained here.
I'd suggest closing this.

[etpinard]

Ok. We can't _just_ close this as clearly some people are finding this annoying.

I wonder if there's a way to turn off the those console warning without altering the functionality.

[dy]

2251 fixes that, although exposes event listener on DOM node.

[oscar-broman]

There is also a dependency on mouse-wheel, which has not been patched.

It is used in src/plots/gl3d/camera.js, for example.

[jacobq]

Was this closed because it was fixed or because it's being tracked in #1240?
I am still seeing violation warnings in the console with plotly.js v1.35.2 that look like this:

plotly.js:nnn [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

[etpinard]

@jacobq we attempted a fix in #2251, so that's why thing think is closed.

Can you please share a reproducible example to help us debug?

[jacobq]

I am seeing it in an electron v2.0.0-beta.1 app, which uses Chrome 61. (Happens when I mousedown on a plot.) However, I haven't been able to reproduce it in a browser yet. It's possible that it's actually being caused by an extension or something. I can't spend more time playing with it today, but if I am able to come up with a simple jsbin demo for you later then I'll be sure to share it here.

[oscar-broman]

My reply clearly states the root of the problem:
https://github.com/mikolalysenko/mouse-wheel

Look at the bottom of wheel.js in that repo.

[jacobq]

@oscar-broman I don't think that would explain the message I encountered though, right? In my case it was regarding touchstart rather than wheel events.

[etpinard]

Right and mouse-wheel is only used in gl3d and pre-regl gl2d graphs. Perhaps @jacobq discovered another problematic case.

[jacobq]

OK, I broke my own promise and spent more time digging into this one.
Minimal demo here:
https://github.com/jacobq/electron-plotly-hello-world
Since the exact same app doesn't seem to generate these warnings when opened in Chrome 64 (see non-electron branch),
I think this is something related to Electron (it could still be between Chrome 61 and 64 -- I don't have an older Chrome instance handy to check -- but I doubt that's it).

[etpinard]

Ok thanks! I guess the least I can do at this stage is to reopen this ticket.

[jacobq]

:+1: Also feel free to clone and run my demo to see it for yourself. Maybe it will be more obvious to you.
I don't know if this is truly related to it but I'm adding a link here just in case: https://github.com/electron/electron/issues/8725

[alexandertu]

Any updates on this?

All examples of choropleth from https://plot.ly/javascript/choropleth-maps generates multiple messages:

[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

My version of Chrome is 66. The messages are generated when I double click on any country.
However, the example with Mapbox doesn't generate any messages...

[boyswan]

Also wondering the status of this!

[jonborchardt]

Also wondering the status of this!

[bikramtpa]

also wondering

[dy]

Blocked by https://github.com/mikolalysenko/mouse-wheel/pull/7

[jackparmer]

This issue has been tagged with NEEDS SPON$OR

A community PR for this feature would certainly be welcome, but our experience is deeper features like this are difficult to complete without the Plotly maintainers leading the effort.

Sponsorship range: $5k-$10k

What Sponsorship includes:

• Completion of this feature to the Sponsor's satisfaction, in a manner coherent with the rest of the Plotly.js library and API
• Tests for this feature
• Long-term support (continued support of this feature in the latest version of Plotly.js)
• Documentation at plotly.com/javascript
• Possibility of integrating this feature with Plotly Graphing Libraries (Python, R, F#, Julia, MATLAB, etc)
• Possibility of integrating this feature with Dash
• Feature announcement on community.plotly.com with shout out to Sponsor (or can remain anonymous)
• Gratification of advancing the world's most downloaded, interactive scientific graphing libraries (>50M downloads across supported languages)

Please include the link to this issue when contacting us to discuss.