Scrolling issues and high CPU usage when watching videos

[nical]

Captchas

• I have read the instructions.
• I have searched existing issues and avoided creating duplicates.
• I am not filing an enhancement request.

What happened?

WebRender (The graphics rendering system in Gecko) splits the scene into retained layers (WR actually calls them pictures) which are composited into the window. Scrolling a retained picture only requires moving it around and re-compositing which saves a considerable amount of CPU and GPU time and makes a big difference for power usage.

WR's ability to split the scene into layers is limited by a number of things. For example element within a non-trivial clip or filter don't get a cached layer. The way Zen's UI is built currently prevents WebRender from generating multiple layers for scrollable content, I suspect because of the rounded-rectangle clip applied to the view.

This causes much choppier scrolling in Zen than in Firefox (and, I expect but did not actually measure, much worse power usage). It affects all platforms.

WebRender will probably get the ability to apply a rounded rectangle clip on retained layers some time this year. In the mean time Zen's beautiful rounded corners come at a very high cost.

Checking how the layerization is working in WebRender is a bit tedious. You can enable the gfx.webrender.debug.picture-caching pref which will show a rather overwhelming overlay. You can compare with how this overlay looks in Firefox and maybe build an intuition from that or ask me if you need help with understanding it.

Reproducible?

• I have checked that this issue cannot be reproduced on Mozilla Firefox.

Version

1.9b

What platform are you seeing the problem on?

Linux (Flatpak)

Relevant log output if applicable

[Psychosoc1al]

Very interesting! But sounds like it's something really fundamental and hard to fix, at least for an ordinary user.

Probably that's the cause of [at least some of] #5734, #5588, #5840, #2206?

[nical]

Indeed this has to be fixed in either (or a mix of) Zen and Gecko.

Probably that's the cause of [at least some of] #5734, #5588, #5840, #2206?

I am pretty sure this has at least a very large impact on all of these issues.

[mauro-balades]

Hi @nical,

Right now, we only add mix-blend-mode to the webview in order to have those rounded corners as you stated, this is due to the issue with https://bugzilla.mozilla.org/show_bug.cgi?id=1934039.

Im afraid we'll keep it until a patch is out...

you are completely right though... I wonder what we can do about it.

[mauro-balades]

Although, I did disable rounded corners and spacings... but the issue doesn't seem to go away?

[mauro-balades]

Matter of fact, even with all the styles removed, it still gets grided and scroll doesn't get cached:

weird..

[nical]

Ah, apologies for the hasty conclusion. Filters like mix-blend modes are also a way to fall off of the compositing optimizations, but it could be other things as well. I'll try to come up with a way to diagnose it when I have some time to spare and get back to you (feel free to poke me if I don't).

[jacksongoode]

Not sure if your implementation is radically different from this. But I used a userChrome that enabled rounded corners on the viewport and it seemingly worked without incurring this performance issue.

https://codeberg.org/awwpotato/potatofox/src/branch/main/chrome/browser/main.css

[mauro-balades]

They are using clip-path and I remember it had high GPU usage for some users and blurry fonts for others. That's why I opted to use mix-blend-mode

[Propheticus]

Could this also explain why font rendering is different (worse, especially thin/small fonts) than in Firefox, even after disabling the zen rounded font setting?