Scrolling issues and high CPU usage when watching videos

[nical]

Captchas

• [x] I have read the instructions.
• [x] I have searched existing issues and avoided creating duplicates.
• [x] 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?

• [x] 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] https://github.com/zen-browser/desktop/issues/5734, https://github.com/zen-browser/desktop/issues/5588, https://github.com/zen-browser/desktop/issues/5840, https://github.com/zen-browser/desktop/issues/2206?

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

[mr-cheffy]

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

[mr-cheffy]

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

[mr-cheffy]

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?

[nical]

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?

I don't think so.

[mr-cheffy]

WebRender will probably get the ability to apply a rounded rectangle clip on retained layers some time this year.

All we can do is wait 😔

If someone finds a patch before it actually gets released to stable, please let me know so we can have it as soon as possible

[jacksongoode]

All we can do is wait 😔

Would it made sense to allow a config to disable the rounded corners in the meantime in order to prevent this perf penalty?

[heikomat]

All we can do is wait 😔

Would it made sense to allow a config to disable the rounded corners in the meantime in order to prevent this perf penalty?

Turns out there already is a zen-mod that does just that. I don't think fixing this performance issue was the authors intention, but it does work!

Installing this zen mod drastically decreases the energy usage on my macbook!

update zen.view.experimental-rounded-view has to be false aswell. It was already false by default for me, but seemingly not for everyone (see https://github.com/zen-browser/desktop/issues/6302#issuecomment-2729220509)

[nical]

I just tried this mod and it isn't enough to get the compositing optimizations working specifically. That is not to say that it doesn't improve things one way or another, just not via the compositing optimizations.

[Psychosoc1al]

Installing this zen mod drastically decreases the energy usage on my macbook!

Actually yes, but only a bit for me. The drastic improvement on my machine is to turn off zen.view.experimental-rounded-view combined with this mod. Now gfx.webrender.debug.picture-caching and GPU usage looks similar to what I see in Firefox.

UPD: I noticed that clip-path from a custom userChrome theme (Natsumi in my case, it's really cool BTW) also ruins caching :( So note this in your experiments

[heikomat]

@Psychosoc1al zen.view.experimental-rounded-view was already false by default for me

[Chu-4hun]

Also encountering this issue zen.view.experimental-rounded-view false didn't help

[Psychosoc1al]

Also encountering this issue zen.view.experimental-rounded-view false didn't help

As stated, it shouldn't help alone by itself. Rounded corners of the webview are also a problem for browser engine. You can try to use the mod mentioned above to bypass that via losing some pretty-looking borders

[wgomg]

Why is every issue about huge and excesive ram usage been marked as duplicated of this one?

[nickj2014]

I just wanted to put some actual GPU power consumption numbers in this thread, as in my opinion this is a big issue with Zen and is likely the cause for lots of the posts I see in the Zen subreddit complaining about laggy scrolling and high power usage compared to other browsers.

Tested on a desktop with a 3080 GPU, I usually have MSI Afterburner up on my second display and Zen was constantly spiking my GPU into a higher power mode, I actually swapped back to Firefox it was that noticeably worse. I was also experiencing small stutters at the beginning of a scroll. Since disabling these rounded corners Zen has been behaving the same as Firefox for me regarding power usage and the scrolling stutters are mostly gone, I'm now happily using Zen as a daily driver with no problems.

On Firefox scrolling this github page up and down results in constant 35w GPU power usage, Zen uses 65w performing the same test.

Installed Disable Rounded Corners mod and switched zen.view.experimental-rounded-view to false, it was true for me on windows by default.

Now Zen also uses 35w scrolling this page.

Here's a video of the test slightly higher power of 38w due to recording.

Below is a screenshot of the power usage for scrolling reddit with the mod enabled and then disabled, without rounded webview it's a flat 30-35w, as soon as I disable the mod my GPU is constantly spiking to 100w or 65w.

I've also noticed that this can affect video playback too, on twitch at least, although the difference depends on the video and your hardware on how much worse it is.

Watching a 1080p 60fps twitch stream consumes about 36w with rounded corners, 30w without them, small saving but it adds up for laptop users.

When I have HDR enabled in windows and am watching a normal 1080p 60fps twitch stream, Zen frequently spikes up to 65w, disabling rounded corners, it's just a flat 35w line, again same as Firefox. Picture below of this behaviour.

I don't have a laptop myself to test battery life, but a user on reddit posted a test where he compared battery life of his morning routine on different browsers. Firefox had 92% battery left after this, Zen had 81% left. I pointed him in the direction of this fix and now after testing again with the mod installed, Zen consumed basically the same battery as Firefox with 91% left. Battery test

EDIT: Wanted to add another reddit thread here that showcases the poor performance this can cause on lower end hardware, his scrolling was very laggy and after testing this fix he seems happy so I'm assuming it's now scrolling as well as Firefox would on his hardware.

Personally, I feel like leaving these rounded corners enabled by default and just waiting an unknown amount of time until the WebRender patch comes out that will allow the rounded corners to be done efficiently is a mistake, I hope you will consider disabling the rounded corners by default and adding them back when it can be done efficiently. Add a toggle to turn them back on for those that still want it and don't care about power usage or performance problems.

If the patch comes out in a few weeks or you can find a fix sooner it's fine to leave them enabled, but if it could potentially be months before this is fixed, leaving Zen in a worse state performance/power wise than Firefox for that long just to have some tiny rounded corners on the webview doesn't make much sense to me. I see complaints about Zen's battery life, unsmooth scrolling and general performance all the time in the subreddit and this issue is likely a big reason for a lot of these problems. Most users will never find this fix on their own and will just associate Zen with being a bit laggy/poor battery performance when it doesn't need to be like this.

Keep up the great work, love the browser.

[nik9play]

I noticed that you also need to disable the background gradient for the optimization to activate.

So the full instruction for optimizing smooth scrolling looks like this:

1. ~~Set zen.theme.gradient to false~~ Disable grain in theme color settings
2. Set zen.view.experimental-rounded-view to false
3. Enable Disable Rounded Corners mod
4. Restart Zen

UPD: As mentioned, disabling the gradient completely is not necessary, just disabling the grain is enough

[sdfjhdsjkgfhdfkj]

The stutter is present not only on lower end hardware. The issue exists for Windows 11 desktop PC when using 4K resolution. After some time of scrolling a page back and forth, it starts to stutter, and the lag continues until the page is refreshed or browser is closed. The aforementioned instruction does indeed eliminate the stutter. It's worth noting that setting gfx.webrender.compositor to false instead also decreases the stutter, but that is probably related to some issue of Firefox itself.

[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?

I don't think so. (https://github.com/zen-browser/desktop/issues/6302#issuecomment-2724269607)

After applying the fix as described in https://github.com/zen-browser/desktop/issues/6302#issuecomment-2764052368 I noticed not only the performance hit is gone (GPU usage 10-14% instead of 50% during scroll) but the blurry look of fonts (example) is fixed on my end as well.

[mr-cheffy]

I wonder why zen.theme.gradient is making this issue, since all it does really is just apply a background to the browser... Maybe it's because of the grainy texture which uses mix-blend-mode?

[chermnyx]

I wonder why zen.theme.gradient is making this issue, since all it does really is just apply a background to the browser... Maybe it's because of the grainy texture which uses mix-blend-mode?

It does not change anything for me, on linux only having gtk csds & rounded corners seem to make difference Maybe on some platforms it has something to do with background transparency and/or other mods?

[Propheticus]

I wonder why zen.theme.gradient is making this issue, since all it does really is just apply a background to the browser... Maybe it's because of the grainy texture which uses mix-blend-mode?

@mauro-balades I think you're on to something there. I just re-enabled the gradient, but removed the grain from all workspace themes > normal CPU&GPU usage during scrolling.

[nickj2014]

Enabling the grain texture is definitely another cause, just tested it on Windows with default acrylic theme and the rounded corner fix enabled. High GPU usage 65w continuous with 100w spikes and the picture-caching overlay goes crazy when smooth scrolling.

No grain

Grain enabled

[nik9play]

I wonder why zen.theme.gradient is making this issue, since all it does really is just apply a background to the browser... Maybe it's because of the grainy texture which uses mix-blend-mode?

@mauro-balades I think you're on to something there. I just re-enabled the gradient, but removed the grain from all workspace themes > normal CPU&GPU usage during scrolling.

I've tested this and it really works. Updated my instructions accordingly. (https://github.com/zen-browser/desktop/issues/6302#issuecomment-2764052368).

[jacksongoode]

Was this fixed in 1.11b?

[ddkedr]

Was this fixed in 1.11b?

Nope :)

Also, @nik9play do we really need the Disable Rounded Corners mod ? Seems like only setting zen.view.experimental-rounded-view to false does the job

[Propheticus]

@ddkedr That setting helps quite a bit, but alone does not resolve the whole issue. With grain already disabled GPU use of Zen on my laptop goes from 30% to 20% during scroll. Completely removing the rounded corners with that mod or using the 'No Gaps' mod's options to disable corners reduces GPU usage a bit further still to ~12% (same as FF at this point).