fix(theming): Conitionally disable blur filter for performance

[susnux]

• Resolves: CSS blur filter seriously impacts performance in Chrome spreed#7896
• Closes: fix: appnavigation performance problems nextcloud-libraries/nextcloud-vue#5607
• Closes: fix: dashboard performance problems #45049
• Resolves: scrolling in dashboard is laggy #44122

Summary

As an alternative for #45049 but this one is not removing the blurry background for all users but only for chrome + edge by default.
User can force enable if it works for them (e.g. they have hardware acceleration) or force disable if they suffer performance issues.

Firefox and Safari are not affected by the performance issues, and Android should also be ok as they have proper hardware acceleration.
Mostly Windows is affected and Linux with faulty GPU drivers.

Screencast

a.mp4

Checklist

• Code is properly formatted
• Sign-off message is added to all commits
• Tests (unit, integration, api and/or acceptance) are included
• Screenshots before/after for front-end changes
• Documentation (manuals or wiki) has been updated or is not required
• Backports requested where applicable (ex: critical bugfixes)

[susnux]

To be discussed by @nextcloud/designers

[kesselb]

Thanks for working on it 👍

Apparently my chromium has no hardware acceleration any longer (it's a snap package now, maybe that's related).

It's basically impossible to use Nextcloud and especially navigation and dashboard.

Screencast.from.2024-05-18.16-46-36.webm

Screencast.from.2024-05-18.16-55-12.webm

The auto-detection worked.
If you selected yes or no once, you cannot go back to "auto" but that's acceptable, I guess.
The left navigation looks definitely cleaner with the blurred background.

[marcoambrosini]

I like this approach in general :)
One thing: leaving the sharp edges of a picture below the text can make it hard to read. I think that when we disable the blur we should also add a solid background, not transparent. We can use an average of the background similar to the auto primary? But lighter or darker depending on the theme.
Can we also narrow this down to windows && chromium users only?

[susnux]

windows && chromium

It is not only Windows, I once got this (I run a rolling release distro) on Linux and had to wait like 2 days for bleeding edge Chromium fixing their GPU layer (not sure what they are using because I never had issues with Firefox).

One thing: leaving the sharp edges of a picture below the text can make it hard to read. I think that when we disable the blur we should also add a solid background, not transparent. We can use an average of the background similar to the auto primary? But lighter or darker depending on the theme.

For 30+ with #42977 this would work fine, but with older (we need to backport) we can basically only mix with primary color and hope it matches somewhat the background.

[marcoambrosini]

I once got this (I run a rolling release distro) on Linux and had to wait like 2 days

I think for such a case we can reasonably expect people to go and find the checkbox themselves

Another Idea that I had in the past was creating a blurred version of the background on the server and use that one with position: fixed behind all transparent elements. What do you think @susnux?
This would preserve the current look and remove the need for a switch.
It seems like this can be done with GD

 imagefilter($image, IMG_FILTER_GAUSSIAN_BLUR);
 imagejpeg($image, 'path/to/save/blurred_image.jpg');

The resulting compressed blurred image will also be much lighter than the actual background, so it shouldn't impact loading times too much

[kesselb]

I think for such a case we can reasonably expect people to go and find the checkbox themselves

If chromium/chrome can use the hardware acceleration depends on the operating system, gpu, gpu drivers and packaging. We cannot just assume it does not work on Windows but everywhere else. I'm using Ubuntu 24.04 with Chromium (snap), and have no hardware acceleration either. It did work with Ubuntu 23.10 and Chromium (apt).

I think you should get an idea, how annoying the current state is, if you turn off the graphics acceleration in your chrome/chromium settings.

[marcoambrosini]

I'm using Ubuntu 24.04 with Chromium

That's the point, it seems like a very niche use case compared to the vast majority of chrome based browsers on platforms other than windows. People with setups similar to yours can surely reach into the settings and force-disable the blur.

That said, what do you think about this idea
also cc @juliushaertl and @ShGKme

[kesselb]

That's the point, it seems like a very niche use case compared to the vast majority of chrome based browsers on platforms other than windows. People with setups similar to yours can surely reach into the settings and force-disable the blur.

How would someone know that for the sluggish appearance is caused by a blur filter that can be turned off by a configuration option? ;)

What are your thoughts on enabling the blur filter by default only for chrome/chromium on macosx and android?

That said, what do you think about #45395 (comment)

I am not sure if I understood the idea. Server will provide a blurred version of the background image. The default background is the not-blurred version. The blurred version is placed on top of the default background image and only visible if there is a transparent element to be shown? Is the background image then loaded twice, and how does an element know that the other background is needed?

Furthermore, I'm not familiar enough with the topic and therefore trust your decision.
I just wanted to add, as someone who has no working hardware acceleration, that the current state is annoying.

[susnux]

That said, what do you think about this idea

I think this is hard to be done correctly implementation-wise, meaning to ensure the blurred version is shown on the correct location with correct scaling.
As said with Nextcloud 30 we can have a fake blurhash that we can use there, for 28 and 29 I think we could instead just mix background and primary.

This would need no changes at all in all apps and library, we just need to patch server theming variables.

For example:

With blur	Without blur	With mixed-color

[marcoambrosini]

@susnux I fiddled a bit with it and I think we can accomplish this with a pseudo element. Here's a code pen:

https://codepen.io/marukodesu/pen/RwmRbpr

If this can be solved without creating a setting, I think we should go down that route.

[ShGKme]

Another Idea that I had in the past was creating a blurred version of the background on the server

We can also start with creating it on frontend side once on load, but could be not very fast as well.

[marcoambrosini]

I created an issue with the approach I propose for 30+