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)?
Được chỉnh sửa bởi Samrin Komal vào
Tất cả các câu trả lời (3)
Giải pháp được chọn
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