Sharp children
Content inside the component remains above the optical surface on every rendering path.
Rendering paths by browser engine
| Engine | Backdrop | Visual layers |
|---|---|---|
| Chromium | Live SVG displacement | Refraction, chroma, blur, tint, specular edge, pointer light |
| Safari / WebKit | CSS backdrop blur | Blur, tint, highlight, dense specular overlay |
| Firefox | CSS backdrop blur | Blur, tint, highlight |
Why Safari and Firefox use a fallback
WebKit accepts SVG reference-filter syntax in a backdrop declaration but does not apply primitives such as feDisplacementMap to the real backdrop. Firefox has the same practical boundary for this effect. CSS blur is therefore presented honestly as blur rather than refraction.
Parallax Glass never applies a filter to the page content behind the primitive and never uses canvas capture, screenshots, foreignObject, or a duplicated DOM layer as a workaround.
Progressive enhancement
Stable layout
The component keeps the same dimensions, radius, tint, and interaction model across browsers.
Reduced work
Off-screen surfaces detach expensive backdrop filters, and stable lens maps are cached.
Reduced motion
Compositions can honor user motion preferences without removing the underlying material.
Testing a Liquid Glass surface
Validate Chromium refraction with high-contrast content crossing all four edges. Check top, bottom, left, and right displacement independently, because a correct CPU map cannot expose every GPU filter-pipeline issue. Then confirm that Safari and Firefox retain readable contrast and do not claim or simulate live refraction.