Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Translucent elements without performance impact #45452

Open
marcoambrosini opened this issue May 22, 2024 · 5 comments
Open

Translucent elements without performance impact #45452

marcoambrosini opened this issue May 22, 2024 · 5 comments
Assignees
Labels
0. Needs triage Pending check for reproducibility or if it fits our roadmap enhancement performance 🚀
Milestone

Comments

@marcoambrosini
Copy link
Member

marcoambrosini commented May 22, 2024

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

@marcoambrosini marcoambrosini added enhancement 0. Needs triage Pending check for reproducibility or if it fits our roadmap labels May 22, 2024
@marcoambrosini marcoambrosini changed the title Translucent element without performance impact Translucent elements without performance impact May 22, 2024
@ShGKme
Copy link
Contributor

ShGKme commented Jun 11, 2024

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
Copy link
Contributor

artonge commented Jun 11, 2024

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
Copy link
Contributor

ShGKme commented Jun 11, 2024

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
Copy link
Contributor

artonge commented Jun 11, 2024

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
Copy link
Contributor

ShGKme commented Jun 11, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
0. Needs triage Pending check for reproducibility or if it fits our roadmap enhancement performance 🚀
Projects
Status: 📐 At design
Development

No branches or pull requests

4 participants