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

Remove extraneous backdrop-blurs across partials #1128

Merged

Conversation

ragibson
Copy link
Contributor

This should mostly fix #994 and partially address #907.

  • Removes most of the extraneous usage of backdrop-blur with no apparent visual impact (I only kept it on menu-wrapper, menu-blur, nested-menu, background-blur, and search-wrapper)
  • Improves number of draw calls in Firefox with header = "fixed" and layoutBackgroundBlur = false by ~200 times, drastically improving scrolling performance
  • Improves number of draw calls in Firefox with header = "basic" and layoutBackgroundBlur = true by ~50%

In my earlier testing, I had simply disabled .backdrop-blur, .backdrop-blur-sm, and .backdrop-blur-2xl on every element except for the search widget, but this is a more proper solution. The inclusion of the backdrop-filter on every article link was incredibly intensive and seemingly included as an oversight as it doesn't appear to have any visual effect. That said, please review and check if any of them were actually intended.

Probably more could be done with a better CSS implementation since I did find a lot of documentation saying to avoid these blur filters entirely as they are extremely intensive and often do not perform well on mobile.

The draw call statistics above are from a local build of your website, https://github.com/nunocoracao/n9o.xyz.
n90_comparison

@nunocoracao
Copy link
Owner

Thanks for this @ragibson will need time to review. I will probably merge the PR and make some extra changes. Did you test other setups - aka a config of the theme that doesn't use background-blur?
Those background blurs on the partials were meant for people not using the background blur on the page itself. Might need to revisit this.

@ragibson
Copy link
Contributor Author

ragibson commented Dec 30, 2023 via email

@nunocoracao
Copy link
Owner

Give me some time to test this.

@nunocoracao nunocoracao changed the base branch from main to dev January 4, 2024 20:53
@nunocoracao nunocoracao merged commit 5aae325 into nunocoracao:dev Jan 4, 2024
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Article lists are incredibly laggy on mobile Firefox and overall theme performance is very low
2 participants