Skip to content

v32 — enable backdrop-filter (glassmorphism) in GeckoView

Choose a tag to compare

@CheapDevotion CheapDevotion released this 11 May 18:59
· 1 commit to main since this release

What's in v32

GeckoView 95 (Firefox 95 from Dec 2021) ships `backdrop-filter` behind a flag — disabled by default. HA dashboards using the glassmorphism / frosted-glass pattern (`backdrop-filter: blur(...)`) had that declaration silently no-op on our kiosks.

v32 writes a Gecko user_prefs file at runtime startup that flips `layout.css.backdrop-filter.enabled` to true. `backdrop-filter` now renders correctly.

Note on `filter` vs `backdrop-filter`

  • `filter: blur(2px)` — blurs the element itself. Always worked in Firefox 35+. If this still isn't visible, the issue is elsewhere (e.g. element has no visible content, or the style is overridden by a more specific selector).
  • `backdrop-filter: blur(2px)` — blurs what's behind a translucent element. The frosted-glass effect. Required v32 to work.

If you're applying the frosted-glass look, the element needs:
```css
backdrop-filter: blur(8px);
background: rgba(255, 255, 255, 0.1); /* must be at least partially transparent */
```

If it has a fully opaque background, there's nothing behind to blur and the property does nothing visible.