Firefox snapshot limitation with backdrop-filter effects

Learn why backdrop-filter and modal backdrops may not render in Percy Firefox snapshots.

In Firefox, Percy snapshots may not correctly render CSS backdrop-filter effects and the ::backdrop pseudo-element used in modal dialogs. This behavior is due to a known Firefox browser limitation and is not caused by Percy.

What you might see?

• Blurred overlays, frosted-glass effects, or dimmed backdrops appear transparent or missing in Firefox snapshots.
• Modal dialogs opened using showModal() appear without their backdrop.
• Percy highlights visual differences even when the page appears correct in a live browser.

Root cause

Firefox uses a screenshot capture path that bypasses WebRender, which renders backdrop-filter and ::backdrop. As a result, these effects do not appear in screenshots. This issue is tracked by Mozilla in Bug 1657997: Screenshot doesn’t capture backdrop-filter effects.

Need more support? Contact BrowserStack.

Reference topic

• Percy Common - FAQs