Severe scroll jank with sticky header + backdrop-filter + lazy images
On my website, fast scrolling causes major stutter when a sticky header with backdrop-filter overlaps a long list of lazy-loaded images. Steps: Open website → scroll quickly several screens Expected: Smooth 60fps; Actual: drops to ~5–10fps + “page slowing down” warning Notes: Removing backdrop-filter fixes; setting images to eager helps Env: Windows 11, Firefox 130 (64‑bit); Chrome/Edge are smooth Any known bug IDs or CSS workarounds (e.g., force own layer, reduce blur radius)?
Okulungisiwe ngu Samrin Komal
All Replies (3)
Isisombululo Esikhethiwe
There seem to be a lot of open bugs with backdrop-filter --
https://bugzilla.mozilla.org/buglist.cgi?quicksearch=backdrop-filter&list_id=17673897
I don't know whether any one of those looks particularly relevant and might list a workaround.
Many bugs have been marked fixed. You could test in Nightly to see whether they have addressed your issue.
Also, don't test with Firefox 130, since that is EOL. I suggest testing with the Extended Support Release of Firefox 140:
i got my solution thanks everyone