Translucent elements without performance impact

[marcoambrosini]

Due to This issue we added some conditional logic and avoid using elements with a translucent background in chrome (apart from MacOS).

I would like to suggest an alternative approach:

• Create a blurred version of the background either in the clients or in the server This can be done with php-gd

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

• Remove the transparency from the translucent elements and add instead the blurred background, perfectly superimposed to the non blurred one. This can be accomplished using a fixed pseudo element and a clipping mask. Here's a codepen PoC.

This creates the same effect without any extra (continuous) computation demand on the clients

[ShGKme]

I think this is a great idea. The PoC also looks very promising. Some thoughts:

1. This would require changes for components and apps, so we probably still need some solution for old servers to fix performance issue...
2. It would be great to make the solution backward-compatible for both apps and @nextcloud/vue. Ideally with some reusable solution, maybe a directive. I'll try to make a PoC

apart from MacOS

You don't want to use this approach on mac? Is there any difference with the blur filter?

[artonge]

This would mean downloading two background, right? Also, instead of setting that second background for each element needing a blurred background, we could set that second background as a sibling of background-container and clipping it to no appear in the top bar and on the sides.

[ShGKme]

This would mean downloading two background, right?

Yes

Also, instead of setting that second background for each element needing a blurred background, we could set that second background as a sibling of background-container and clipping it to no appear in the top bar and on the sides.

But apps may use it in any place (e.g. call view in Talk), and we have a kind of background already on the elements with the blur filter.

[artonge]

But apps may use it in any place (e.g. call view in Talk), and we have a kind of background already on the elements with the blur filter.

Isn't the goal to remove that blur background?

[ShGKme]

Isn't the goal to remove that blur background?

As I understand, the goal is to remove creating this blur background using CSS filter on the fly, because it has bad performance on machines without GPU acceleration.

The @marcoambrosini's proposal is to generate this blurred image once on the server instead of CSS filter.