URL: https://firefox-backdrop-filter-bug.tralume.org/
Browser / Version: Firefox 147.0
Operating System: Linux
Tested Another Browser: Yes Safari
Problem type: Something else
Description: Mixed rendering of background-attachment: fixed and backdrop-filter are broken in firefox
Steps to Reproduce:
On Firefox, elements with backdrop-filter: blur() exhibit severe rendering artifacts (flickering or "broken" edges) when the page has a fixed background (background-attachment: fixed).
The issue is most noticeable when interacting with the page (e.g., hovering over cards to trigger transforms) or during window resizing. Increasing the browser zoom level (e.g., to 200%) significantly eases the reproduction of these visual breakages.
Steps to reproduce:
Open the provided minimal test case.
Ensure background-attachment: fixed is applied to the body.
Rapidly move the mouse over the glass-morphism cards to trigger translateY transforms.
Observe the edges of the cards and the blurred area for flickering or rendering "tears".
(Optional) Zoom in to 200% to see the artifacts more clearly.
Environment details
OS: Fedora 43 (KDE/Gnome), Wayland/X11; macOS (Latest)
Firefox Version: Reproducible on both Stable and Nightly
Graphics: WebRender enabled (Standard configuration)
Through a process of elimination, the root cause was isolated to the combination of background-attachment: fixed and backdrop-filter.
When background-attachment is set to scroll, the artifacts disappear.
Using a position: fixed pseudo-element for the background instead of background-attachment: fixed also resolves the issue, suggesting a bug in how WebRender handles coordinate mapping or caching for backdrop-filters on fixed-attachment backgrounds.
View the screenshot
Browser Configuration
From webcompat.com with ❤️
URL: https://firefox-backdrop-filter-bug.tralume.org/
Browser / Version: Firefox 147.0
Operating System: Linux
Tested Another Browser: Yes Safari
Problem type: Something else
Description: Mixed rendering of background-attachment: fixed and backdrop-filter are broken in firefox
Steps to Reproduce:
On Firefox, elements with backdrop-filter: blur() exhibit severe rendering artifacts (flickering or "broken" edges) when the page has a fixed background (background-attachment: fixed).
The issue is most noticeable when interacting with the page (e.g., hovering over cards to trigger transforms) or during window resizing. Increasing the browser zoom level (e.g., to 200%) significantly eases the reproduction of these visual breakages.
Steps to reproduce:
Open the provided minimal test case.
Ensure background-attachment: fixed is applied to the body.
Rapidly move the mouse over the glass-morphism cards to trigger translateY transforms.
Observe the edges of the cards and the blurred area for flickering or rendering "tears".
(Optional) Zoom in to 200% to see the artifacts more clearly.
Environment details
OS: Fedora 43 (KDE/Gnome), Wayland/X11; macOS (Latest)
Firefox Version: Reproducible on both Stable and Nightly
Graphics: WebRender enabled (Standard configuration)
Through a process of elimination, the root cause was isolated to the combination of background-attachment: fixed and backdrop-filter.
When background-attachment is set to scroll, the artifacts disappear.
Using a position: fixed pseudo-element for the background instead of background-attachment: fixed also resolves the issue, suggesting a bug in how WebRender handles coordinate mapping or caching for backdrop-filters on fixed-attachment backgrounds.
View the screenshot
Browser Configuration
From webcompat.com with ❤️