Chrome/React mouse-wheel event issue [Workaround]

[philLITERALLY]

Running Chrome Version 73.0.3683.86.

Trying to zoom in or out using the scroll wheel results in the page scrolling not only the image as expected.

And on the console inspector I see:
Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/6662647093133312

The url is slightly different to the one noted in this PR comment: #39 (comment)

The PR listed above seems to be related to touch specific actions Treat Document Level Touch Event Listeners as Passive, the one I am seeing in the console seems to be related to the wheel Treat Document Level Wheel/Mousewheel Event Listeners as Passive

I tested it in the examples listed on this page and it is reproducible on all the examples not just my code (one example I tested with: https://jsfiddle.net/chrvadala/f67qyfsd/)

I've already set touch-action: none; like most people suggest as the solution but had no luck.

Strangely this is only affecting Chrome and all other browsers work as expected.

Please let me know if you need anything else from me to help. Thanks!

[gaborvoros]

Same here :/

[byronwall]

This React issue has the relevant context. facebook/react#14856

Chrome 73 changed the behavior of wheel events to be "passive" by default. A passive event ignores any attempt to call preventDefault which means it not possible to dismiss the scrolling behavior after handling the zoom. Until React provides a way to control or disable the passive handling, this is going to be broken in Chrome unless you're willing to manually add event listeners with {passive: false} set.

[chrvadala]

Hi guys, until React has an official fix, we have to use the workaround published here facebook/react#14856 (comment)
I made a sample and it seems to work https://jsfiddle.net/yrmdzwn8/

I hope that Facebook/Chrome will provide soon an official solution.

[gaborvoros]

Thanks @chrvadala you saved my day :)
The workaround works for me

[chrvadala]

Today there isn't still an official solution, but a developer released a better workaround facebook/react#14856

[krnlde]

Instead of attaching the event via attributes why don't you use document.addEventListener when componentDidMount / useEffect? Since you're using refs already that would help the issue without a lot of hustle - as far as I understand it.

[chrvadala]

To be honest I thought that React would have released an official fix for this, but it seems that, after 6 months, it is better to patch this library.
I agree with your approach, Are you open to submit a PR?

[krnlde]

There you go

[krnlde]

Bump

[chrvadala]

A fix has been released with v3.5.0 (thanks to @krnlde )

Workaround code suggested few comments above is no more required. Don't forget to get it rid off.

[krnlde]

Seems like I introduced a new bug with this fix. I don't get any events on Edge and IE, can anybody confirm? x-ref: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7134034/

edit: This example doesn't work either: https://developer.mozilla.org/en-US/docs/Web/API/Element/wheel_event

[chrvadala]

Unfortunately now I don't have a Windows PC with me, but I should be able to test it tomorrow.

[krnlde]

The problem only occurs with "precision touchpads". The thinkpad nob and a mousewheel do work.

[chrvadala]

sounds good! Is there a way to detect a "precision mousepad"? Do we have some way to fix it?

[krnlde]

Unfortunately no. I'm still wondering if it worked before, because if I read the bugtracker correctly it shouldn't work either way with the precision touchpad. Also this quote

We lost this argument. Microsoft has chosen not to fix this bug despite our years of begging.
(source)

makes me unhappy.

It looked like probably mousewheel and/or DOMMouseScroll events could help, but they didn't seem to work on my machine either.

These guys have the same problem it seems, maybe we can help each other out.

[chrvadala]

Can you check if plain React wheel event works better? Moreover, I'm going to create a new issue since the topic we are talking about is a bit different from this one.

[krnlde]

I used the simplest codesandbox for this issue and don't get an event in the console on Edge. Which means it shouldn't either with synthetic nor with native events.