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)?
Samrin Komal modificouno o
Chosen solution
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.
https://www.firefox.com/en-US/channel/desktop/#nightly
Ler a resposta no contexto 👍 0All Replies (3)
Chosen Solution
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:
You must log in to your account to reply to posts. Please start a new question, if you do not have an account yet.