4 ms·

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

• ivolimmen 1y ago
  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.
• 7bit 1y ago
  Works fine on Firefox tho
  • pcardoso 1y ago
    And for me it was where it was the smoothest. But it even worked in Safari, albeit a bit slowly.
  • hyperbolablabla 1y ago
    Not on mobile
    • deleted 1y ago
      [deleted]
    • 7bit 1y ago
      Yeah on mobile
  • frizlab 1y ago
    No. The effects are not fully there on Firefox/Safari.
  • jansan 1y ago
    No. It becomes apparent in the "Magnifying Glass" demo. Nothing is magnified in Firefox, while it is a really cool effect in Chrome.
• deleted 1y ago
  [deleted]
• sonar_un 1y ago
  Ok, this was the funniest comment i've read in a while.
• conradfr 1y ago
  What is funny is that for me the page on Chrome is slower and the scrolling jankier than on Firefox with the unsupported effects (macOS M1). Besides that, very impressed by the article presentation.
  • chrisldgk 1y ago
    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.
• Kiro 1y ago
  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.
  • sudarshandodiya 1y ago
    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.
    • dmix 1y ago
      Plenty of people have multiple browsers installed. If you have time to comment to complain then you have time to open a second app to see a tech demo
• latexr 1y ago
  For those wondering about the reference: https://youtu.be/GamP4chXJ2I?t=17 https://youtu.be/GamP4chXJ2I?t=17
  • wltr 1y ago
    I had some feeling I know that from somewhere, but couldn’t recall the source. Thanks.
• deleted 1y ago
  [deleted]