Skip to content

Browser support

Real refraction needs SVG filters inside backdrop-filter, which only Chromium's compositor implements today. Vitrum treats that as a tiering decision, not a bug to hide.

EnvironmentEngineWhat you see
Chrome, Edge, Arc, Brave (Chromium)refractBackdrop displacement baked per geometry, prismatic edges, lens magnification
Safari 16.4+frostTuned blur + saturation, specular ring, sheen; scenes still bend their own content
Firefox 128+frostSame frost rendering — and the same scene bending
Any browser, reduced transparency onsolidOpaque surfaces, structure and focus intact
JavaScript disabledfrostThe no-JS default is the frost engine

Why detection is not a CSS query

CSS.supports("backdrop-filter", "url(#f)") returns true in browsers that parse the value but never render it — a false positive with no behavioral probe to correct it. The engine script therefore reads the user-agent client hints brand list, which only Chromium-family browsers populate, and falls back to frost on any doubt. The decision runs in a pre-paint inline script, so no surface ever flashes from one engine to another.

Scene refraction works everywhere

Backdrop displacement is one compositor's feature, but a plain SVG filter applied to ordinary content is not. The Glass Scene component exploits that: it bakes one displacement map for a patch of content you own — neutral everywhere, bending under each registered lens — and applies it with a regular filter. That bends real pixels in Safari and Firefox too. This site's hero and the Material Studio stage both ride it: switch to ?glass=frost and the headline still bends.

Performance posture

  • Refraction filters are shared, quantized presets mounted once — not per-element filter trees.
  • The veil material (dialogs, sheets, menus) never refracts; overlay-scale displacement is the jank source.
  • Nested glass laminates automatically: one backdrop pass per stack, ever.
  • Everything animated is transform or opacity; blur values never animate.