I'm not sure about other browsers but using Chrome on linux the magnifying glass demo was weird. Though it looked like some glass distortion I couldn't drag it around vertically :(
Liquid Glass in the Browser: Refraction with CSS and SVG
101–110 of 127 posts
Re: Liquid Glass in the Browser: Refraction with CSS and SVG
#102Don’t blame the author for the chrome only demo, blame Apple, and this bug from 2014! https://bugs.webkit.org/show_bug.cgi?id=127102
Re: Liquid Glass in the Browser: Refraction with CSS and SVG
#103Earlier quoted context omitted.
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.
> 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
And used by backdrop-filter here: https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProp...
Re: Liquid Glass in the Browser: Refraction with CSS and SVG
#104Fantastic demo, very slick!
Re: Liquid Glass in the Browser: Refraction with CSS and SVG
#105Fantastic job! Great writeup too!
Re: Liquid Glass in the Browser: Refraction with CSS and SVG
#106insightful and nice work
Re: Liquid Glass in the Browser: Refraction with CSS and SVG
#107Impressive but also impressive in that scrolling down through the examples makes my fully-loaded M4-Max Macbook Pro judder. I hate to imaging the performance of a full UI leveraging this stuff. Apple can do it in the UI because they can optimize the hell out of it.
I did a quick performance fix, should be a bit better, at least on Chrome. (Safari stills seems to be a bit slow to render SVGs) Anyway, I did not expect this blog post to be on HN, so still things to improve on it.
It's very very smooth for me now. Impressive. Thank you for sharing!
Re: Liquid Glass in the Browser: Refraction with CSS and SVG
#108What a beautiful demo and great highlight that Liquid Glass is not all "liquid ass", as in it could actually be usable for very specific niches. The Magnifying Glass example is just gorgeous!
Re: Liquid Glass in the Browser: Refraction with CSS and SVG
#109What a beautiful demo and great highlight that Liquid Glass is not all "liquid ass", as in it could actually be usable for very specific niches. The Magnifying Glass example is just gorgeous!
The best use of it on the iPhone beta is definitely the video player overlay UI and a floating search box. Two things highlighted in the post.
Re: Liquid Glass in the Browser: Refraction with CSS and SVG
#110Earlier quoted context omitted.
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.
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