🫨 Fix my crazy blur lags | Advanced
You guys know i love CSS only stuff,
this time i wanted to focus on scroll animations, i want to recreate an image i found online and make it interactive
The problem is, blur :D given the bubble gets rescaled during the animation quite heavily, it feels like it's trying to rerender the blurred segments every frame that makes it do crazy lags.
https://codepen.io/Cubiq/pen/VworQqO?editors=0100
Do you think that going for transform 3d instead of scale might fix this bug?
thanks a ton!
original / inspired by:
https://x.com/kravetzzzz/status/1792586595880640769
27 Replies
you can HUGELY reduce the "lag" by using
will-change: scale on the <li> elements
i can't guarantee it is perfect, since im using my igpu to render the browser, and stuff's sometimes a tiny bit weirdI tried that before, the lag still remains, i can't really see any difference but i guess i should put it there still..
i saw a massive difference
but thank you still!
try it again, it doesn't hurt
but it is in the
<li> elements, not the <ul>it is :D the lag just feels about the same, but i didn't measure it, maybe its a bit better but my goal is to eliminate the lag entirely xd
that is so much worse on your pc
you have NO IDEA how bad you have it
oh well, and over all i have pretty good pc :D
i mean yeah, its definitely caused because of that scale. i will try going perspective with translateZ, maybe that one could solve it 😅
this is how it looks for me
it only skips frames when scrolling up
i tried, but it didn't work for me
but you can try it, instead of using scale
its moving in 3d but it is still laggy.. also very broken in terms of coords as you can't really go 0 when in perspective, its so broken xd, so yeah, also not a way..
still laggy but a lot less laggy
that's because the small ones aren't small enough to cause it xd
how about you transition the opacity at that point?
instead of the scale?
that one is fine
looks better to me too
sorta
I wonder if using a pseudo element for the bg with
filter: blur(10px); would be any more performant- backdrop-filter esp with blur value seems to be more finickyi could try doing that 😅 but expecting it's gonna be the same..
I’d be curious how different the performance measurements are. I’m not very familiar with how or where the metrics are for fps (performance or would it be in animation in dev tools?)
edit: note to self- forgot about recording the animation ;
- enable FPS meter and paint flashing( to see which parts of your page are being repainted) from Rendering , then record animation from Performance
- Turn on Layer Borders to check if elements are promoted to GPU layers
-Look for bottlenecks such as “Recalculate Style” or “Layout
- Use CPU throttling in DevTools to test animation performance on less powerful devices
When I’ve had issues with backdrop-filter , they’ve been solved with using filter instead so just thought I’d pipe in just in case
backdrop-filter is indeed heavier than filter, from what ive seen
so, thats a good suggestion
well it is indeed, the problem is that we want to actually blur the background <-o , so filter that blurs o-> wouldn't work in this case.
the idea she proposed is to blur a pseudo-element (:before or :after) instead
the backdrop-filter blur web platform test shows that Chrome takes 3 to 4 times longer to paint the test than Firefox. So the heart of the problem might just be Chrome's current not so great implementation of backdrop-filters. Hopefully this gets fixed up this year as part of the Interop work: https://wpt.fyi/results/css/filter-effects/backdrop-filter-basic-blur.html?label=master&label=experimental&view=interop&q=label%3Ainterop-2025-backdrop-filter
🤔 that's very interesting
specially since the effect has to be re-calculated every frame
because deeper functionalities of backdrop filters on firefox are directly limited.. Their optimization is not to include features (or better not to code them at all) while there were directly part of the whole svg filter spec 😅 I'm not saying that chrome's approach couldnt have been improved, for sure they could, but i feel like this is not the same thing..
https://discord.com/channels/436251713830125568/1217109466906886155/1217268831488180354
what "deeper functionalities of backdrop filters" are you talking about that are limited on Firefox?