www.bilibili.com - Unable to change the sound level using the mouse scroll wheel

[xuyuehang]

URL: https://www.bilibili.com/video/av69750500

Browser / Version: Firefox 69.0 Operating System: Windows 10 Tested Another Browser: Yes

Problem type: Something else Description: Can't use mouse wheel to adjust the volume in full screen mode. Steps to Reproduce: STR:

1. Open url.
2. After the page is loaded, click the button to enter the full screen.
3. Use the mouse wheel to adjust the volume.

Expected results: use mouse wheel to adjust the volume anywhere in the full screen. Current result: adjustable only when the mouse is near the volume button.

I made a regeression and it point to Bug 1543128. https://phabricator.services.mozilla.com/D26807

It works in Chrome and other browser.

Browser Configuration

• None

From webcompat.com with ❤️

[cipriansv]

Thanks for the report, @xuyuehang.

I was indeed able to reproduce the issue. I am not able to change the volume level using the mouse wheel on Firefox as presented below (Chrome on the left side, Firefox on the right side)

Tested with: Browser / Version: Firefox Nightly 71.0a1 (2019-10-22), Chrome 77.0.3865.120 Operating System: Windows 10 Pro

Moving to needsdiagnosis for further investigations.

[ksy36]

Created a bug for this https://bugzilla.mozilla.org/show_bug.cgi?id=1590883

[lock[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue at https://webcompat.com/issues/new if you are experiencing a similar problem.

[ksy36]

As Mike mentioned here the site is using a DOMMouseScroll event listener to listen for scroll events on the video. This chunk of code is responsible for volume adjusting:

$(document).off("mousewheel" + i.config.namespace + " DOMMouseScroll" + i.config.namespace).on("mousewheel" + i.config.namespace + " DOMMouseScroll" + i.config.namespace, (function(t) {
                    if (Number(i.state.mode) === Number(L.UI_FULL) || Number(i.state.mode) === Number(L.UI_WEB_FULL)) {
                        var r = t.originalEvent.wheelDelta && (t.originalEvent.wheelDelta > 0 ? 1 : -1) || t.originalEvent.detail && (t.originalEvent.detail > 0 ? -1 : 1);
                        r > 0 ? e.volume(Math.min(i.video.volume + .03, 1), !0) : r < 0 && e.volume(Math.max(i.video.volume - .03, 0), !0)
                    }
                }

As DOMMouseScroll is a non-standard event and no longer recommended, using wheel event will fix the issue.

Also since wheelDelta is not supported by Firefox, the site would need to use t.originalEvent.deltaY in the above chunk of code.

[ksy36]

Sent an email to livehelp@bilibili.com

[softvision-oana-arbuzov]

The issue seems to be fixed.

Tested with: Browser / Version: Firefox Nightly 74.0a1 (2020-01-13) Operating System: Windows 10 Pro