Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Chrome/React mouse-wheel event issue [Workaround]

See original GitHub issue

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

The url is slightly different to the one noted in this PR 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:

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!

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:3
  • Comments:17 (14 by maintainers)

github_iconTop GitHub Comments

chrvadalacommented, Apr 1, 2019

Hi guys, until React has an official fix, we have to use the workaround published here I made a sample and it seems to work

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

byronwallcommented, Mar 28, 2019

This React issue has the relevant context.

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Javascript prevent default Ctrl + MouseWheel behavior
Trying to prevent zoom on window/document/body does not really work but wrapping the contents of the body with a div and preventing zoom...
Read more >
Element: mousewheel event - Web APIs | MDN
The obsolete and non-standard mousewheel event is fired asynchronously at an Element to provide updates while a mouse wheel or similar ...
Read more >
Easy fix for: Unable to preventDefault inside passive event ...
1. Remove the need for preventDefault() in the event listener · 2. Mark the event listener not the be passive (not recommended).
Read more >
How to Configure Mouse Wheel Speed Across Browsers ...
For IE, Safari, Chrome: The mousewheel event is fired when a mouse wheel or similar device is operated. The below function can be...
Read more >
Chrome Browser Bug: Scroll Wheel Randomly Stops Working ...
Meaning, the root issue here is that the user-scroll-event is getting sent to the wrong container element (which is why the scrolling stops ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found