Liquid Glass Fallback

Essence’s Liquid card style uses an SVG-based refraction filter (backdrop-filter: url(...)). This API is only available in Chromium-based browsers.

Browser support

Browser	Liquid glass
Chrome (desktop & Android)	✅ Full effect
Edge	✅ Full effect
Firefox	❌ Falls back to Glass
Safari (macOS & iOS)	❌ Falls back to Glass
Other non-Chromium	❌ Falls back to Glass

What visitors see in unsupported browsers

When liquid glass cannot initialize, Essence:

Skips the liquid-glass JavaScript module
Keeps the standard Glass backdrop-blur layer visible
Preserves card layout, blur, shading, and edge settings

The fallback is automatic — no visitor action or theme setting required.

Glass is not a bug — it is the designed fallback. Cards still look frosted and readable; only the refractive liquid effect is missing.

How detection works

On page load, Essence checks:

Chromium user agent and vendor (Chrome, Edge, CriOS)
SVG backdrop-filter: url() support via a capability probe

If either check fails, liquid glass is not loaded.

Settings affected

Liquid glass applies only when these settings are Liquid:

Posts list card style
Post page card style

Each can be set independently. You might use Liquid on the homepage post list and Solid on post pages for readability.

Recommendations

For publishers

Preview liquid glass in Chrome before launch
Do not worry about Firefox/Safari visitors — fallback is seamless
If you need identical visuals everywhere, use Glass instead of Liquid

For developers

Liquid glass loads as a separate JavaScript chunk (@essence/effects/liquid-glass). It initializes only when a .section-posts-card-style-liquid or .post-container-card-style-liquid scope exists on the page.

Chrome but still seeing Glass?

If you use Chrome and still see glass instead of liquid:

Hard-refresh the page (cache may serve an older bundle)
Check for extensions that block canvas or filter effects
Confirm the card style setting is Liquid, not Glass
Open DevTools console for JavaScript errors