Major performance impact due to rounded corners implementation (laggy scrolling)

[Manut38]

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?

Hi Zen Browser Team, First up, thanks for this awesome browser, I can't wait to see where this project is going and I'm really loving the ideas and implementation!

For quite a while (I can't tell exactly since when) I have noticed a major regression in the general performance of the browser, especially while scrolling. I'm using a high refresh rate monitor, so it is very easy to spot the stuttering and lag spikes during smooth scrolling and the generally slower feeling interface. I saw a couple of other performance related issues that I assume have the same cause.

I was able to pinpoint most of these issues to the rounded corners implementation. By disabling the rounded corners by first setting zen.view.experimental-rounded-view to false

and additionally using this Zen Mod Disable Rounded Corners - Zen Mods

I was able to achieve a scrolling performance pretty much on par with the latest stable Firefox build.

Only doing one of these things did not help the problem.

I'm not using any other Zen Mods and have been able to reproduce the same result with every extension disabled.

To me it really seems like, right now there is a major performance impact as soon as any rounded corners are shown, both with the old pseudo element and the new method.

Thank you for your input on this!

Reproducible?

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

Version

1.0.1-a.19

What platform are you seeing the problem on?

Windows (Optimized Build)

Relevant log output

No response

[emvaized]

I wonder if implementing rounded corners like this in userChrome.css would work better for you:

#tabbrowser-tabpanels {
    margin-right: var(--zen-element-separation) !important;
}
#tabbrowser-tabpanels, .browserSidebarContainer {
    border-radius: 4px !important;
    overflow: hidden;
}

It probably will be less reliable than using clip-path and show sharp corners on some pages, but could theoretically provide a better performance (disable Zen's implementation of rounded corners before testing).

[Manut38]

@emvaized Thank you for you suggestion! I tried using this code in my userChrome.css and made sure to leave zen.view.experimental-rounded-view set to false and the Zen Mod to disable the rounded corners active.

The border-radius works, but I'm again experiencing a similar performance hit to when I'm on the default setting (with zen.view.experimental-rounded-view either enabled or disabled)

I have also been able to reproduce this on a new, clean profile, to make sure there is not any residue from a setting, Zen Mod, or extension, and the behavior is the same.

[emvaized]

he border-radius works, but I'm again experiencing a similar performance hit to when I'm on the default setting

Hmm, maybe then browser doesn't use clip-path under the hood anymore, as the Zen mod description states. Or it's not the main reason of a problem

[Manut38]

Okay I just updated to the latest version 1.0.1-a.21 and I think the zen.view.experimental-rounded-view flag was removed and set as the new default. The Zen Mod I referenced before does not work on this version anymore. (At least in version 3.0.0).

While I feel like Zen's general performance has been improved a bit, I still experience the same scrolling lag. This becomes especially apparent on a large or complex page. I usually check the about:support page to test because the difference is very noticeable there.

I dug through the flags and found zen.theme.border-radius, with which I could disable the borders altogether by setting it to 0. The performance instantly increased again to the level I see in stable Firefox.

Also keep in mind that I'm using a 240Hz Monitor! and I'm pretty sure the difference is impossible to see on anything below 144Hz (at least if your hardware is quite powerful).

One more thing I realized is, that I have modified the following scrolling flags, that make the lag a lot more apparent than on the default settings. So if anyone would like to reproduce this issue and compare it with the stable Firefox, I recommend using these flags to make the scroll last a bit longer:

general.smoothScroll.currentVelocityWeighting = 1 general.smoothScroll.msdPhysics.continuousMotionMaxDeltaMS = 12 general.smoothScroll.msdPhysics.enabled = true general.smoothScroll.msdPhysics.motionBeginSpringConstant = 600 general.smoothScroll.msdPhysics.regularSpringConstant = 650 general.smoothScroll.msdPhysics.slowdownMinDeltaMS = 25 general.smoothScroll.msdPhysics.slowdownMinDeltaRatio = 2 general.smoothScroll.msdPhysics.slowdownSpringConstant= 250 general.smoothScroll.stopDecelerationWeighting = 1

In summary, it seems like the current implementation of the webView borders still has quite a performance impact, especially on high refresh rate monitors.

I'm going to leave the zen.theme.border-radius at 0 for the time being.

[Manut38]

Version 1.0.1-a22 just re-introduced the zen.view.experimental-rounded-view flag. Just like before, as long as it's enabled, I'm experiencing the issue. I need to set it to false, together with zen.theme.border-radius = 0 to get proper smooth scrolling