search

chrvadala / react-svg-pan-zoom

:eyes: A React component that adds pan and zoom features to SVG
https://chrvadala.github.io/react-svg-pan-zoom/
MIT License
684 stars 126 forks source link

Chrome/React mouse-wheel event issue [Workaround] #141

Closed philLITERALLY closed 5 years ago

philLITERALLY commented 5 years ago

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!

gaborvoros commented 5 years ago

Same here :/

byronwall commented 5 years ago

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.

chrvadala commented 5 years ago

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.

gaborvoros commented 5 years ago

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

chrvadala commented 5 years ago

Today there isn't still an official solution, but a developer released a better workaround https://github.com/facebook/react/issues/14856

krnlde commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

There you go

krnlde commented 5 years ago

Bump

chrvadala commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

krnlde commented 5 years ago

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

chrvadala commented 5 years ago

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

krnlde commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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.