Victory: bug with Chrome 73 + VictoryZoomContainer Zoom

[goldo]

Bug

Checklist

• [x] This is not a victory-native specific issue. (Issues that only appear in victory-native should be opened here)

• [x] I have read through the FAQ and Guides before asking a question

• [x] I am using the latest version of Victory

• [x] I've searched open issues to make sure I'm not opening a duplicate issue

The Problem

With Chrome 73, when you want to zoom in/out your VictoryChart with a VictoryZoomContainer, the page scrolls down/up in the same time and you should see this in the console:

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/6662647093133312

With the recent chrome 73 version, there is a breaking changing in the zoom handling.
More details here: https://developers.google.com/web/updates/2019/02/scrolling-intervention

Reproduction

• update to chrome 73
• open: https://formidable.com/open-source/victory/docs/victory-zoom-container/
• open the console (only on chrome 73+)
• zoom in/out

[boygirl]

@goldo thanks for this issue and related information. I'll take a look as soon as I can

[AlexanderSergeev]

Also waiting for the fix

[sebimarkgraf]

Took a quick look at this and found the following:

• Chrome wants the event listener marked as active to be able to prevent scrolling
• React has marking events as passive/active on the roadmap, but it is not implemented yet https://github.com/facebook/react/issues/6436

Therefore the events need to be registered manually and passed {passive: false}.
I will prepare a short PR and link it here.

[sebimarkgraf]

Tried to fix it here: https://github.com/Sintifo/victory/tree/fix/chrome-passive-scroll
But that way the zoom really seems laggy in the demos.

Maybe someone with more knowledge in svg event handling can take a look.

[mrdavey]

There's an interesting discussion going over at React about Chrome's breaking changes. There is also a _temporary_ fix posted here: https://github.com/facebook/react/issues/14856#issuecomment-478144231

I've tried it with VictoryZoomContainer and it works as it should.

[chepelevdi]

There's an interesting discussion going over at React about Chrome's breaking changes. There is also a _temporary_ fix posted here: facebook/react#14856 (comment)

I've tried it with VictoryZoomContainer and it works as it should.

Thanks a lot

[sebimarkgraf]

There's an interesting discussion going over at React about Chrome's breaking changes. There is also a _temporary_ fix posted here: facebook/react#14856 (comment)

I've tried it with VictoryZoomContainer and it works as it should.

Thank you very much for the temporary fix. Works really well with victory.
This would mean there is no need for victory to fix this until react decided on a way they want to handle this.