Click on select element shows this warning:
[Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive.
The problem is that this also expand the height of HTML page in Google Chrome. Tested in Chrome Version 59.0.3071.86 (Official Build) (64-bit) In firefox this does not occur.
Simple code: https://jsfiddle.net/gurigraphics/2399mnyb
<div> <select> <option>Option</option> </select> </div>
The same happens with "mouse hover" if you customize the scroll bar.
What is the better solution? I found this theory: https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md
you should use the passive option in . addEventListener(), which doesn't block the event while your listener executes. document. addEventListener("mousewheel", somefunction(), { passive: false });
An event listener is a procedure in JavaScript that waits for an event to occur. The simple example of an event is a user clicking the mouse or pressing a key on the keyboard.
Chrome automatically logs whenever a scroll-blocking event occurs. Using Chrome's DevTools, I checked that there is no mousewheel listeners on the select box, and it still happens.
I suggest turning off 'Verbose' in the console.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With