There is a strange problem with audio element in latest Chrome-based browsers (probably in other ones as well, but I did not test). The volume slider of the audio, which is internally rendered as input of type "range" and pseudo attribute "-webkit-media-controls-volume-slider", produces the warning in developer console when user hovers a mouse over the slider:
[Violation] Added non-passive event listener to a scroll-blocking 'wheel' event. Consider marking event handler as 'passive' to make the page more responsive.
I do know what is the passive event handlers and how to define them, and hence to eliminate the warning, if it would be my code. The problem is that there is no wheel event listeners assigned explicitly.
Here is a simple test page to reproduce - you can load it locally in a browser (a short sound is attached to enable the audio controls, you can use your own one).
<!DOCTYPE HTML>
<html>
<body>
<audio id="main" controls controlsList="nodownload noplaybackrate"></audio>
</body>
<script>
const main = document.getElementById("main");
main.src = "data:audio/wav;base64,UklGRuQBAABXQVZFZm10IBAAAAABAAIARKwAAIhYAQAC" +
"AAgAZGF0YcABAACAgICAgICAgICAf39/f39/f39/f39/gICCgoKCgYF/f39/f3+AgH9/f3+AgIGBg" +
"YGBgYCAgICAgICAgIB+fn19fX1+fn9/f3+AgIKCgYF+fnx8fHyAgIKCgYF+fn5+gICAgH5+fHx9fY" +
"CAgYGAgH9/f3+AgYCAf3+AgIKCgoKAgHx8fHyAgIGBf398fHx8f3+CgoKCgYGBgYCAgICAgICAf3+" +
"AgIGBf4B+fn9+gYGCgoGBgIB/f4CAgYGBgYCAgIB/f39/f39/f4CAgYGAgH5+fHx8fH5+f39/f39/" +
"f3+BgYGBgYGAgH5+fX19fX9/gYGBgX9/fn5/f4CAf39/f39/f39/f4GBgoKCgoCAfn5/f4GBg4OBg" +
"X9/fn6AgICAf39/f4GBgYGBgYGBgYGAgH9/fn59fX5+f39/f39/f39/f39/f39/f39/f39/gICAgI" +
"B+fn5+fn5/f4CAgIB/f35+fn5+fn5+f3+AgIGBgYGAgICAgICAgH9/f3+AgIGBgYGAgICAgYGBgYK" +
"CgoKCgoKCgYGBgYGBgIB+fn19fX1+fn5+fX19fX19fX19fX5+f3+AgICAf39/f4CAgIB/f39/";
</script>
</html>
Then hover your mouse over the "speaker" sign to open volume slider and look into the log to find the warning.
So, I suppose there is a hidden (not publicly visible) wheel event listener, assigned by the browser itself, and it does this in blocking mode. The question is is there a way to prevent the warning?
I tried to assign my own wheel event listener for the entire document and made it passive, which was confirmed by the developer tools. Yet the warning persisted.
