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.
Comments
Yeah, curious. The mentioned backdrop-filter seems to be supported everywhere
https://caniuse.com/?search=backdrop-filter
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.
These are in the specification here: https://drafts.fxtf.org/filter-effects-1/#typedef-filter-url
And used by backdrop-filter here: https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProp...