5 ms·

I had the same reaction but the weird thing is: it looked ok in FireFox..?

• yreg 1y ago
  Yeah, curious. The mentioned backdrop-filter seems to be supported everywhere https://caniuse.com/?search=backdrop-filter https://caniuse.com/?search=backdrop-filter
  • Cu3PO42 1y ago
    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.
    • freehorse 1y ago
      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.
    • bfgeek 1y ago
      > which are more powerful and is out-of-spec These are in the specification here: https://drafts.fxtf.org/filter-effects-1/#typedef-filter-url https://drafts.fxtf.org/filter-effects-1/#typedef-filter-url And used by backdrop-filter here: https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProp...
• nine_k 1y ago
  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.
• mirekrusin 1y ago
  Try on chromium based browser - it's much better.
• fuzzy2 1y ago
  The backdrop-filter thingy most definitely does not work in Firefox. Everything above does. It works on Chromium-based browsers but it does not look great, probably needs some filtering.