Chrome/React mouse-wheel event issue [Workaround]

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: https://github.com/chrvadala/react-svg-pan-zoom/pull/39#issuecomment-302163912

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!

[chrvadala]

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

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

[byronwall]

This React issue has the relevant context. https://github.com/facebook/react/issues/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.