1659338 - Janky scrolling on mobile in www.rrweb.io (bad GPU time)

Status: RESOLVED WORKSFORME

(Core :: Graphics: WebRender, defect, P3)

Description

[Emilio Cobos Álvarez (:emilio)]

Scrolling that page in Fenix with WR enabled (WR is enabled by default on this device) is janky. Fennec works fine and so does force-disabling WebRender.

Comment 1

[Emilio Cobos Álvarez (:emilio)]

Attachment: about:support

Comment 2

[Jamie Nicol [:jnicol]]

Could you attach a profile please Emilio? With screenshots disabled and the renderer thread enabled. Thanks!

Comment 3

[Emilio Cobos Álvarez (:emilio)]

Hopefully this is what you need, let me know otherwise :)

https://share.firefox.dev/312S5sw

Comment 4

[Jamie Nicol [:jnicol]]

That's great Emilio, thanks. One more thing (for now): can you enable gfx.webrender.debug.compact-profiler, gfx.webrender.debug.profiler and gfx.webrender.debug.gpu-time-queries, and tell me what the rough values are for "Renderer" and "GPU"?

Comment 5

[Emilio Cobos Álvarez (:emilio)]

Renderer is between 5 and 10ms. GPU is between 30 and 50ms.

Comment 6

[Jamie Nicol [:jnicol]]

The high GPU time makes sense given that most of the profile is spent in swapbuffers. We're obviously doing something on that page that the GPU struggles with, but I'm not sure what.

One last thing! Could you unset compact-profiler but leave profiler and gpu-time-queries enabled. You should now see a sort of colour-coded bar chart. (It might help to go in to landscape and/or set gfx.webrender.debug.small-screen true.) You should be able to look up the colours of the bars and see which type of primitives are taking the most GPU time?

Comment 7

[Emilio Cobos Álvarez (:emilio)]

Attachment: profiler screenshot

Seems like most of it is in the mixblend stuff.

Comment 8

[Emilio Cobos Álvarez (:emilio)]

Ahh, here's the mix-blend-mode:

.feature-inner::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    box-shadow: 0 24px 48px rgba(17, 16, 62, 0.12);
    mix-blend-mode: multiply;
}

Removing the mix-blend-mode: multiply declaration doesn't seem to change rendering meaningfully... Maybe other browsers / layers manage to optimize it out?

Comment 9

[Glenn Watson [:gw]]

This page seems to run well now (probably as a result of the optimizations we made to handling mix-blend containers that are root elements).