1749365 - [Meta] Twitch volume slider is very laggy on slower hardware

Status: NEW

(Core :: Performance, defect, P3)

Description

[Jeff Muizelaar [:jrmuizel]]

The volume slider is jittery and can end up lagging behind the mouse substantially (to the point where you can release the mouse and watch the slider move back and forth a couple of times afterward)

It works noticeably better in Chrome.

https://share.firefox.dev/3qakIAD

Comment 1

[Jeff Muizelaar [:jrmuizel]]

Here's a profile with less (no chat) going on: https://share.firefox.dev/3HSzhi6

Comment 2

[Jeff Muizelaar [:jrmuizel]]

A profile from Chrome: https://share.firefox.dev/3JXKMa8

Comment 3

[Jeff Muizelaar [:jrmuizel]]

A new FF profile with the fix to 1749590: https://share.firefox.dev/3HXNmuO

Comment 4

[Sean Feng [:sefeng]]

Hi Jeff, the profile in comment 3 seems quite responsive to me. All I notice was there was a slow composite between 7s and 8s, but that is irrelevant to the volume changing I think. Is there a particular jank in the profile?

The pattern is always like an volumechange event handler, then layout, then graphics. I checked the chrome's profile and the runtime of the event handler is on par. And the layout + graphic seems also close.

I wonder if you have some ideas about moving this bug forward. Thanks!

Comment 5

[Gregory Pappas [:gregp]]

Attachment: nightly_99_twitch_volume_slider.webm

This is still quite unresponsive on my gen6 machine when compared to chromium. The distance from the pointer may be on par but there is an odd bouncing effect that I can only produce in Firefox.

Comment 6

[Jeff Muizelaar [:jrmuizel]]

I think there's an event ordering thing going on here that's causing the slider to jump around in Firefox.

Comment 7

[Jeff Muizelaar [:jrmuizel]]

I'll continue to investigate further.

Comment 8

[Jeff Muizelaar [:jrmuizel]]

Attachment: Reduced test case

Here's a reduced test case that I think replicates the problem. In Firefox, moving the slider around causes jumpiness and the slider will continue moving even after releasing it. In Chrome this doesn't happen.

Comment 9

[Jeff Muizelaar [:jrmuizel]]

I added DOMEventLatency markers for message events and they show the problem more clearly on Twitch:
https://share.firefox.dev/3H1sG4h

The times when the message events have latencies around 200ms seem to correspond to the times when the volume slider jumps around.

Comment 10

[Olli Pettay [:smaug][[e-mail]]]

Bug 1749590 and bug 1755006 should have helped here quite a bit.

Jeff, is the behavior still significantly worse in Firefox vs some other browser?

Comment 11

[Gregory Pappas [:gregp]]

I am not Jeff though I will comment on the current state of this bug. It feels much, much better in the latest Nightly but is still worse than Chrome on my gen6 machine. When the right sidebar Chat pane is extra active, it seems to feel worse. Here is an example of a Twitch web broadcast with an active chat pane https://www.twitch.tv/xqcow

What I did was slowly move the volume slider back and forth for about 2 minutes, periods of lag would coincide with bursts of activity in the chat pane. I did this test a few times in Firefox Nightly and Chrome. Bursts of activity in the chat pane did not result in volume slider lag in Chrome, but did in Firefox Nightly.

It may be appropriate to close this bug and open a new one about inefficiencies in the chat pane possibly causing bad main thread load if it is confirmed that the active chat pane can bog down other portions of the twitch web application.

Comment 12

[Olli Pettay [:smaug][[e-mail]]]

The behavior, which bug 1755006 modified, could be tweaked a bit. I think Firefox still more consistently tries to use higher fps than Chrome.
Maybe that could be changed.
But yeah, a new bug with some testcases would be nice.
(I don't seem to have slow enough machines to reproduce the issues on Twitch, or perhaps I'm doing something work with it or perhaps I get different UI)