Chrome‑only demo
The interactive demo at the end currently works in Chrome only (due to SVG filters as backdrop‑filter).
You can still read the article and interact with the inline simulations in other browsers.
Dishonor on your WHOLE FAMILY! dishonor on you, dishonor on your cow...
This is exactly the kind of thing where this is OK since it's literally impossible otherwise. It's showcasing a specific feature that is not generally available.
In that case it would be more apt to title the post as "Liquid Glass in Chromium Browsers...", or something along those lines. People looking at the title are going to assume that it works accross all browsers, click on the link, and then get disappointed.
I mean that makes sense though, right?
Since it’s only available on Chrome, it’s the only one doing all the computations (GPU or otherwise) that other browsers won’t do, since they just ignore the rule.
Not OK on mobile Firefox: displacement maps do not apply, so there's no actual refraction, the liquid feeling; there's only the specular effect at the edges.
Try opening it in a Chromium-based browser and compare.
backdrop-filter is supported by all major browsers, but specifically using SVG filters, which are more powerful and is out-of-spec, is only supported in Chromium-based browsers.
Not sure if this is relevant, but while moving the slider around, in chromium i see 40% gpu utilisation, while in firefox less than 20% (macbook m3 pro). I do not observe any noticeable difference otherwise in terms of quality.
PS Neat website and explanations, but talking about the liquid glass as a design principle in general, I would rather ui elements in a random website not use that much of gpu for not great reasons but maybe that's my problem of not thinking different.
