1730435 - Jerky volume slider on twitch.tv

Status: RESOLVED FIXED

(Core :: DOM: Events, defect)

Description

[Rodrigo]

Attachment: Volume slider jerkiness

STR:

1. Open any Twitch video, it can be a VOD or a livestream. In this case I have used https://twitch.tv/xQcOW
2. Press and hold the volume knob and slide it to the right and then to the left a few times.
3. Observe how jerky the volume slider is.

Notes:

• This was done in Firefox's safe mode and I cannot reproduce it on Edge or Brave (Chromium).
• CPU and GPU usage were at acceptable values, both below 60% when trying to reproduce this.
• Not related to this bug, the auto quality feature dropping the video all the way down to 480p (as seen in the first few seconds of the video) makes no sense when my PC can easily reproduce any content at 1080p on a 1gbps wired connection. This is also a Firefox issue.

Comment 1

[Rodrigo]

To make it clear, this also happens outside of safe mode. I was just trying to make sure I had no add-on interference. I have also tried a fresh profile and still am able to reproduce this.

Comment 2

[Rodrigo]

Attachment: about:support

Comment 3

[Mike Conley (:mconley) (:⚙️)]

I'm going to guess this has something to do with our mouse events, since this is likely how the Twitch volume slider is working under the hood.

Comment 4

[Henri Sivonen (:hsivonen)]

Open any Twitch video, it can be a VOD or a livestream. In this case I have used https://twitch.tv/xQcOW

This video shows me the volume control in a different place than the screen capture. The volume control doesn't track the mouse perfectly, but it's not that bad. Maybe my workstation is too fast?

How do I get the same view as in the screen capture?

Comment 5

[Rodrigo]

This video shows me the volume control in a different place than the screen capture. The volume control doesn't track the mouse perfectly, but it's not that bad. Maybe my workstation is too fast?

How do I get the same view as in the screen capture?

I don't know, I haven't seen a different version of Twitch's video player where the volume control is in a different position.

Comment 6

[hookie]

i can confirm this is still happening and just noticed it today (1/28/23) on 109.0 (64bit). it's most notable on twitch.com since the site's volume adjuster gives level % as you adjust it, and the adjustment will consistently set the volume at 3-7% lower than when mouse-left was held down. it should be noted this only occurs with mouse adjustments and the problem is happening when mouse-left is released. hovering the mouse cursor over the volume control and using keyboard arrows to adjust the volume allows for precise +/- 1% adjustments as desired. moving the firefox window to another monitor with a different resolution and refresh rate doesn't fix the issue. and the issue doesn't happen in other web browsers: opera, chrome, vivaldi, brave

Comment 7

[BugBot [:suhaib / :marco/ :calixte]]

Redirect a needinfo that is pending on an inactive user to the triage owner.
:masayuki, since the bug has recent activity, could you have a look please?

For more information, please visit auto_nag documentation.

Comment 8

[Masayuki Nakano [:masayuki] (he/him)(JST, +0900)]

The ni is just not canceled in comment 5.

And I also don't see the volume slier at the position, and I don't reproduce the reported symptom.

The volume slider is just an <input type="range">, not implemented by the web app. In my environment, the web app handles change event of React.

t.handleRangeInputChange = function (e) {
          var n = t.state.useTooltipValueToSetVolume && null !== t.state.tooltipValue ? t.state.tooltipValue : + e.currentTarget.value;
          t.setState((function (e) {
            var r;
            return e.requestedVolume === n ? null : {
              requestedVolume: n,
              volumeState: i.REQUESTED,
              showVolumeTooltip: !0,
              useTooltipValueToSetVolume: !1,
              tooltipValue: n,
              tooltipXOffset: n * ((null === (r = t.rangePos) || void 0 === r ? void 0 : r.width) || 0)
            }
          }), (function () {
            t.throttledVolumeChange(n)
          })),
          t.setVolumeTooltipDisplayTimer(),
          t.props.enablePlayerActiveTimeout()
        },

Looks like that it updates the tooltip's volume value, i.e., this would cause a DOM mutation.
And also there are some mouseleave and mousemove events of React to show/hide the tooltip in ancestors. In the reported video, this tooltip is not shown around the volume slider. It could be that the tooltip is appearing at wrong position and it overlaps the volume slider, then the web app gets received unexpected mouse cursor position.

Does somebody can confirm what DOM mutation occurs at dragging if you reproduce this bug? You can check it in the "Inspector" of the web developer tools. If DOM mutation happens, the element or the attribute which is modified is highlighted for a while.

Comment 9

[Masayuki Nakano [:masayuki] (he/him)(JST, +0900)]

Oh, we don't handle it with Drag and Drop events, instead, handle it with mousedown, mousemove and mouseup...
https://searchfox.org/mozilla-central/rev/7a9e3bbab8f81c2cbc72a394047f948da9cfef9a/dom/html/HTMLInputElement.cpp#4199-4213

Comment 10

[Masayuki Nakano [:masayuki] (he/him)(JST, +0900)]

Hmm, but it seems that our mouse event handler correctly handles the mouse cursor position even if an event occurs in a wrong element.
https://searchfox.org/mozilla-central/rev/7a9e3bbab8f81c2cbc72a394047f948da9cfef9a/layout/forms/nsRangeFrame.cpp#380-381

Comment 11

[Ksenia Berezina [:ksenia]]

We've got a report in https://github.com/webcompat/web-bugs/issues/117491 describing the same issue as in comment 6.

I could consistently reproduce it today, but it seems to be working as expected now (tested with https://www.twitch.tv/39daph).

handleRangeInputChange function has changed compared to https://bugzilla.mozilla.org/show_bug.cgi?id=1730435#c8

        t.handleRangeInputChange = function (e) {
          var n = + e.currentTarget.value;
          t.setState((function (e) {
            return e.requestedVolume === n ? null : {
              requestedVolume: n,
              volumeState: i.REQUESTED,
              showVolumeTooltip: !0
            }
          }), (function () {
            t.throttledVolumeChange(n)
          })),
          t.setVolumeTooltipDisplayTimer(),
          t.props.enablePlayerActiveTimeout()
        },

Hi :hookie, wonder if it's still an issue for you?

Comment 12

[hookie]

yeah i just opened two new tabs on Twitch right now and they no longer exhibit the issue. i had a tab earlier from this morning open that still had the problem, but upon reloading the same channel, the problem is no longer there

Comment 13

[Ksenia Berezina [:ksenia]]

Thanks for checking! I guess we can close this.