8 ms·

Next-level frosted glass with backdrop-filter

384 points by timdorr 2y ago

andai 2y ago
This always bugged me! The whole point of frosted glass is to be smooth and relaxing, but the lack of surrounding pixel data causes the blurred image to make unnatural jumps in brightness and color when just a single row of pixels scrolls into view. It makes me very happy that someone not only noticed this, but did something about it, and then shared it freely!
ndesaulniers 2y ago
I like the fonts used on this blog!
- emmelaich 2y ago
  Same! The cursive font is Cartograph CF. I thought at first it may have been (one of the) Playwrite fonts. See https://fonts.google.com/?query=playwrite https://fonts.google.com/?query=playwrite
  - diroussel 2y ago
    How did you come to that conclusion? I inspected the bold cursive text, and Firefox dev tools tell me it's "Sriracha". https://fonts.google.com/specimen/Sriracha?query=Sriracha https://fonts.google.com/specimen/Sriracha?query=Sriracha
    - emmelaich 2y ago
      I used Chrome devtools! Computed style is: Family name: Cartograph CF PostScript name: CartographCF-RegularItalic Font origin: Network resource(16 glyphs) Same result in Firefox for me. MacOS Sequoia.
strongpigeon 2y ago
Very clever and it does result in a nice effect. I do have to say that I am a fan of this glassmorphism trend.
tbolt 2y ago
Beautiful
webstrand 2y ago
You can do it with negative margins too, https://codepen.io/webstrand/pen/OPLLBZN https://codepen.io/webstrand/pen/OPLLBZN
- KaoruAoiShiho 2y ago
  Wait is this better than the one in the OP?
- Eduard 2y ago
  does "scatter" do anything? doesn't seem so to me on android chrome (pixel 7a)
- tyleo 2y ago
  This is really interesting. I suspect there may be different reasons to take different approaches depending on surrounding CSS and elements. A lot of UI work I do is experimenting with different ways to do things to find what’s cleanest for the specific situation. Small note that the drag UX doesn’t appear to work on iOS.
KaoruAoiShiho 2y ago
How does this compare with this that was posted on HN a few weeks ago? https://www.tyleo.com/html-glass.html https://www.tyleo.com/html-glass.html
- webstrand 2y ago
  That one suffers from the effect described in the article, it only considers pixels directly behind the element for blurring. So unlike real glass it can't catch adjacent light. But it is unique in its own way and has many other good ideas.
- tyleo 2y ago
  I’m the author of tyleo.com. I’m happy to see folks innovating and building on the idea. I’m also surprised at how popular this topic is on HN! Both of these posts add additional tweaks beyond `backdrop-filter: blur()` to enhance glass effects. We use different tweaks so it looks like the techniques in each of our posts is compatible. When I get around to it I’ll update my page to link to this new one. Perhaps in a few weeks we will get the, “I’ve consolidated all the HTML glass effects on HN and this is what it looks like,” post :)
IAmGraydon 2y ago
The technique is interesting, but every time I see this effect, I can't help but feel like 2010 is calling and wants its UI design back.
- ronsor 2y ago
  Looking at most "modern" UI design, I want to go back to 2010.
  - moondev 2y ago
    Windows Vista introduced this and released in 2007
- tomovo 2y ago
  Brushed metal for me, thanks.
seltzered_ 2y ago
In case anyone's trying to remember what macos/iOS does with what they call 'vibrancy' - can't find the video directly anymore but they sorta touch on it here (WWDC 2014 , session 220): https://github.com/ASCIIwwdc/wwdc-session-transcripts/blob/ba4f7516b68fa536fb873ee7a0e260bad3f8d026/en/2014/220.vtt https://github.com/ASCIIwwdc/wwdc-session-transcripts/blob/b... "The actual implementation and blending that we do could be a Linear Burn, a Color Dodge, PlusD, PlusL."
- chrismorgan 2y ago
  Microsoft’s Acrylic is tolerably documented too (the concepts, not the exact values): https://learn.microsoft.com/en-us/windows/apps/design/style/acrylic https://learn.microsoft.com/en-us/windows/apps/design/style/.... At the end, especially: “The acrylic recipe: background, blur, exclusion blend, color/tint overlay, noise.”
chrismorgan 2y ago
I don’t like the `height: 200%`: you might as well be specific about how much extra you need, because an extra 100% might be a lot more than you need, or not enough. First question: how much more do you need? Per https://drafts.fxtf.org/filter-effects/#funcdef-filter-blur https://drafts.fxtf.org/filter-effects/#funcdef-filter-blur (via MDN blur() docs → link to spec): > Note: A true Gaussian blur has theoretically infinite extent, but in practice all implementations use a finite-area approximation of a Gaussian blur. At the time of writing (January 2024) all major implementations use the familiar three-pass box blur approximation, which has extent: ((3 * sqrt(2 * π) / 4) * σ). ¾√2π is about 1.88; it’s generally most convenient to just double the radius instead. So, if you’re going for a 16px blur, add 32px. (The formula would make it 30.079px; so I’d accept 30px and 31px also.) In the first main demo with code: ditch the `height: 200%`, change the inset to `0 0 -32px 0`, and change the 50% in the mask-image linear-gradient to calc(100% - 32px). (Aside: you can also shorten the gradient definition: linear-gradient(to bottom, black calc(100% - 32px), transparent 0%).) Applying it to later things is left as an exercise to the reader. The SVG <filter> element is interesting in this rendering size question: it lets you control the rendering area for the filter, via its x, y, width and height attributes. Their defaults are -10%, -10%, 120% and 120%, meaning 10% overdraw on each edge. Unfortunately you can’t really do height="calc(100% + 32px)" which is what you’d want for the equivalent here. Yes, you could definitely do this whole thing in SVG, using the BackgroundImage source—in fact, you can do better, because you can composite that with SourceAlpha, rather than the dodgy mask-image technique you’re limited to in HTML/CSS. Unfortunately I don’t believe any current browsers support BackgroundImage, though I think IE and Opera used to, and Inkscape does.
- 8n4vidtmkvmk 2y ago
  All this time I thought a 16px gaussian blur meant it faded to 0 at 16px. That explains why I always seem to need to add some extra padding! I never thought to question it! Wow! I can use this right away to fix some stuff, thanks for sharing!
  - chrismorgan 2y ago
    Thanks for the response! It’s always nice to know when some incidental thing you remark on has helped someone. Thinking back, I suppose I struggled with understanding the SVG <feGaussianBlur stdDev> parameter when messing around with complicated filters in Inkscape a few years back, for much the same reasons. And I didn’t actually know the ¾√2π until today, I just knew that a factor of 2 was a little more than enough. I’m glad for the note being attached to the spec, it’s a great note. Although people often talk of blur radii, it might help to remember it’s a standard deviation. Take the curve in https://en.wikipedia.org/wiki/Gaussian_filter#/media/File:Gaussian_Filter.svg https://en.wikipedia.org/wiki/Gaussian_filter#/media/File:Ga..., and a Gaussian blur is taking so much of each pixel value, most from the closest ones, less from further away, negligible by two standard deviations away, but only asymptotic to zero; hence the “theoretically infinite extent” the spec note mentioned. But the ¾√2π thing will probably be good enough forever.
refulgentis 2y ago
This is claptrap: "This effect helps us add depth and realism to our projects." -- when was the last time you, dear reader, saw frosted glass? Let's be real: it's because it was in iOS 7, Apple never moved on from that look and feel, and Apple is Apple. (n.b. a winking opinion, and a mild homage to Apple lore, not a genuine rebuke: https://folklore.org/Round_Rects_Are_Everywhere.html https://folklore.org/Round_Rects_Are_Everywhere.html)
- satvikpendem 2y ago
  Lots of sites these days are using that frosted glass effect, I recall seeing it on the Linear site recently.
hanifbbz 2y ago
The tutorial itself is next level with stunning interactive visual story telling.
- 8n4vidtmkvmk 2y ago
  All of Josh's tutorials are like this. Check out some of his others!
deleted 2y ago
[deleted]
kamens 2y ago
Josh your work is amazing
sureIy 2y ago
This is the sort of completely unnecessary details that eat hours of your time and add tons of code and maintenance for something that few-to-none notice. It's great to experiment, but don't use this in projects that you intend to maintain. Signed, someone who used to do this a lot.
- probabletrain 2y ago
  I think "tons of code and maintenance" is an exaggeration for this effect, once it's done you'll rarely have to come back to it. Many people value creating and using products with these kinds of details, I disagree with "don't use this in projects you intend to maintain" as across-the-board advice.
  - sureIy 2y ago
    > is an exaggeration for this effect I disagree. Check the changes required to the spacing/sizing. Soon you will need to adjust those values and that.is.maintenance. Multiply this by each detail and soon you have more work than you signed up for. This is usually when someone comes along and wants a rewrite because the codebase is fragile.
    - anamexis 2y ago
      Why would you need to adjust any spacing/sizing values for for the blur? There’s not much of anything to adjust.
    - henriquez 2y ago
      If you're using a CSS preprocessor like SCSS or LESS you can just define the height for the toolbar as a variable and then use the mask area for the blur as a multiplier (eg. 1.88) of that variable. In general for making things easy.to.maintain it's better to not build project-wide stylesheets with raw CSS.
      - ksymph 2y ago
        You don't even need a preprocessor for that with var() and calc(). It's perfectly possible to write clear and easily maintainable raw CSS nowadays.
eps 2y ago
> Application error: a client-side exception has occurred (see the browser console for more information). A bit too "next-level" for my iPad it seems.
lbotos 2y ago
love this post just for the example of filter: hue-rotate(0deg); That's one I've never seen before!
vintagedave 2y ago
I added this to https://cppbuilder.com/ https://cppbuilder.com/ which used to use a standard blur for the header background. It's very subtle, especially with the bottom border turned off, but I appreciate the knowledge of it being a 'better', ie a more real effect matching how real-world light or glass works. Feels like doing it right. Firefox on Mac _may_ have a slight lag scrolling now which Chrome does not show. Not mentioned in the article (that I saw) is that despite being a background blur it will affect all elements placed in the header, even with z-index higher than the blur, unless you mark them `position: relative;`. I added that style to my nav container.
- zipy124 2y ago
  The scrolling lag also makes it unsuable on Firefox mobile, my s24 ultra chugs hard on the top part of the website...
  - vintagedave 2y ago
    Thanks. I reverted the code. A simple blur-behind is significantly faster.
- hulium 2y ago
  Isn't it a bit unnecessary to add blur when the website is almost completely black? Maybe put some screenshots on the page.
  - vintagedave 2y ago
    You're probably right, but I enjoyed the effect as text and graphics slid under the header. Originally I was going to have the header and page different colours. I may add more graphics soon!
spiffyk 2y ago
These effects are all pretty, but like... there should be some sort of media query for devices that are not that powerful (or their owners simply do not wish to burn through their batteries just to read a website). It gets pretty annoying that my phone slows down to a crawl when someone has these effects on their website. At the same time, simply opting out of the blurring and leaving everything else as-is is not a solution, since that may quickly render a lot of things unreadable.
- cons0le 2y ago
  Absolutely. None of these look good to me. I would rather just have plain text. I wish all of these fancy sites would at least include a plain text / simplified reader mode by default. Front end stuff is getting way too over engineered .
zipy124 2y ago
My Samsung s24 ultra chugs at like 10fps or lower when scrolling on this site. Needless to say I won't be taking recommendations from the author, if I can't use their website smoothly on one of the most Powerful phones on the market.
- fellowniusmonk 2y ago
  What browser are you using? My phone is a fair bit older and downmarket than that and has no issues.
- jchw 2y ago
  Interesting. This page is easily max framerate on my Pixel 4a, which I'd expect since the effects should be hardware accelerated fairly easily...
  - Sateeshm 2y ago
    Fellow 4a user (best small phone ever). It's perfectly fine for me too.
jp1016 2y ago
this effect is nextlevel, i use it for almost all my personal projects. i have created a library for generating frosted glass effect. https://github.com/JP1016/react-icon-blur https://github.com/JP1016/react-icon-blur
Etheryte 2y ago
Last time this article came up, I voiced my opinion that instead of a blog post, this should've probably been a bug report either for the browser or the CSS spec itself. Since this got posted again, I went and looked for one and boy did it not disappoint: there's an ongoing ticket that's now been open for eight years [0]. Granted, that ticket and the related spec cover much more than just this behavior, but the underlying issue is the same. If you look through related tickets on e.g. Chromium, you'll see plenty that are closed as won't fix exactly because of this, the spec itself doesn't account for all the use cases. [0] https://github.com/w3c/fxtf-drafts/issues/53 https://github.com/w3c/fxtf-drafts/issues/53
madeofpalk 2y ago
backdrop-filter: blur() is still annoyingly buggy and inconsistent between browsers. I just ran into this this week - Chrome doesn't supported nested/stacked blurred backgrounds, whereas Firefox does. https://codepen.io/joshhunt/full/GgKZKed https://codepen.io/joshhunt/full/GgKZKed Also ran into odd colour issues in Firefox when combining it also with opacity.
fracus 2y ago
This was one of the most effective tutorials I've read on HN. Define everything and hold our hands the entire way. I find I'm often frustrated reading tutorials on HN because they are often littered with ambiguous language, undefined labels, and incorrect assumptions on the reader's prior knowledge.
bldng 2y ago
The recent posts around frosted glass reminded me of an exploration I did a while ago, using perspective and svg filters (feTurbulence and feDisplacementMap) to simulate an actual rough surface. https://sg5omz.csb.app/ https://sg5omz.csb.app/ Chrome & Safari render it differently but interesting, Firefox is skipping it completely … I‘d need to look into it. Anyway, just wanted to share it :)

384 points by timdorr 2y ago

This always bugged me! The whole point of frosted glass is to be smooth and relaxing, but the lack of surrounding pixel data causes the blurred image to make unnatural jumps in brightness and color when just a single row of pixels scrolls into view. It makes me very happy that someone not only noticed this, but did something about it, and then shared it freely!

ndesaulniers 2y ago

I like the fonts used on this blog!

emmelaich 2y ago
Same! The cursive font is Cartograph CF. I thought at first it may have been (one of the) Playwrite fonts. See https://fonts.google.com/?query=playwrite https://fonts.google.com/?query=playwrite
- diroussel 2y ago
  How did you come to that conclusion? I inspected the bold cursive text, and Firefox dev tools tell me it's "Sriracha". https://fonts.google.com/specimen/Sriracha?query=Sriracha https://fonts.google.com/specimen/Sriracha?query=Sriracha
  - emmelaich 2y ago
    I used Chrome devtools! Computed style is: Family name: Cartograph CF PostScript name: CartographCF-RegularItalic Font origin: Network resource(16 glyphs) Same result in Firefox for me. MacOS Sequoia.

strongpigeon 2y ago

Very clever and it does result in a nice effect. I do have to say that I am a fan of this glassmorphism trend.

tbolt 2y ago

Beautiful

webstrand 2y ago

You can do it with negative margins too, https://codepen.io/webstrand/pen/OPLLBZN https://codepen.io/webstrand/pen/OPLLBZN

KaoruAoiShiho 2y ago
Wait is this better than the one in the OP?
Eduard 2y ago
does "scatter" do anything? doesn't seem so to me on android chrome (pixel 7a)
tyleo 2y ago
This is really interesting. I suspect there may be different reasons to take different approaches depending on surrounding CSS and elements. A lot of UI work I do is experimenting with different ways to do things to find what’s cleanest for the specific situation. Small note that the drag UX doesn’t appear to work on iOS.

KaoruAoiShiho 2y ago

How does this compare with this that was posted on HN a few weeks ago? https://www.tyleo.com/html-glass.html https://www.tyleo.com/html-glass.html

webstrand 2y ago
That one suffers from the effect described in the article, it only considers pixels directly behind the element for blurring. So unlike real glass it can't catch adjacent light. But it is unique in its own way and has many other good ideas.
tyleo 2y ago
I’m the author of tyleo.com. I’m happy to see folks innovating and building on the idea. I’m also surprised at how popular this topic is on HN! Both of these posts add additional tweaks beyond `backdrop-filter: blur()` to enhance glass effects. We use different tweaks so it looks like the techniques in each of our posts is compatible. When I get around to it I’ll update my page to link to this new one. Perhaps in a few weeks we will get the, “I’ve consolidated all the HTML glass effects on HN and this is what it looks like,” post :)

IAmGraydon 2y ago

The technique is interesting, but every time I see this effect, I can't help but feel like 2010 is calling and wants its UI design back.

ronsor 2y ago
Looking at most "modern" UI design, I want to go back to 2010.
- moondev 2y ago
  Windows Vista introduced this and released in 2007
tomovo 2y ago
Brushed metal for me, thanks.

seltzered_ 2y ago

In case anyone's trying to remember what macos/iOS does with what they call 'vibrancy' - can't find the video directly anymore but they sorta touch on it here (WWDC 2014 , session 220): https://github.com/ASCIIwwdc/wwdc-session-transcripts/blob/ba4f7516b68fa536fb873ee7a0e260bad3f8d026/en/2014/220.vtt https://github.com/ASCIIwwdc/wwdc-session-transcripts/blob/b... "The actual implementation and blending that we do could be a Linear Burn, a Color Dodge, PlusD, PlusL."

chrismorgan 2y ago
Microsoft’s Acrylic is tolerably documented too (the concepts, not the exact values): https://learn.microsoft.com/en-us/windows/apps/design/style/acrylic https://learn.microsoft.com/en-us/windows/apps/design/style/.... At the end, especially: “The acrylic recipe: background, blur, exclusion blend, color/tint overlay, noise.”

chrismorgan 2y ago

I don’t like the `height: 200%`: you might as well be specific about how much extra you need, because an extra 100% might be a lot more than you need, or not enough. First question: how much more do you need? Per https://drafts.fxtf.org/filter-effects/#funcdef-filter-blur https://drafts.fxtf.org/filter-effects/#funcdef-filter-blur (via MDN blur() docs → link to spec): > Note: A true Gaussian blur has theoretically infinite extent, but in practice all implementations use a finite-area approximation of a Gaussian blur. At the time of writing (January 2024) all major implementations use the familiar three-pass box blur approximation, which has extent: ((3 * sqrt(2 * π) / 4) * σ). ¾√2π is about 1.88; it’s generally most convenient to just double the radius instead. So, if you’re going for a 16px blur, add 32px. (The formula would make it 30.079px; so I’d accept 30px and 31px also.) In the first main demo with code: ditch the `height: 200%`, change the inset to `0 0 -32px 0`, and change the 50% in the mask-image linear-gradient to calc(100% - 32px). (Aside: you can also shorten the gradient definition: linear-gradient(to bottom, black calc(100% - 32px), transparent 0%).) Applying it to later things is left as an exercise to the reader. The SVG <filter> element is interesting in this rendering size question: it lets you control the rendering area for the filter, via its x, y, width and height attributes. Their defaults are -10%, -10%, 120% and 120%, meaning 10% overdraw on each edge. Unfortunately you can’t really do height="calc(100% + 32px)" which is what you’d want for the equivalent here. Yes, you could definitely do this whole thing in SVG, using the BackgroundImage source—in fact, you can do better, because you can composite that with SourceAlpha, rather than the dodgy mask-image technique you’re limited to in HTML/CSS. Unfortunately I don’t believe any current browsers support BackgroundImage, though I think IE and Opera used to, and Inkscape does.

8n4vidtmkvmk 2y ago
All this time I thought a 16px gaussian blur meant it faded to 0 at 16px. That explains why I always seem to need to add some extra padding! I never thought to question it! Wow! I can use this right away to fix some stuff, thanks for sharing!
- chrismorgan 2y ago
  Thanks for the response! It’s always nice to know when some incidental thing you remark on has helped someone. Thinking back, I suppose I struggled with understanding the SVG <feGaussianBlur stdDev> parameter when messing around with complicated filters in Inkscape a few years back, for much the same reasons. And I didn’t actually know the ¾√2π until today, I just knew that a factor of 2 was a little more than enough. I’m glad for the note being attached to the spec, it’s a great note. Although people often talk of blur radii, it might help to remember it’s a standard deviation. Take the curve in https://en.wikipedia.org/wiki/Gaussian_filter#/media/File:Gaussian_Filter.svg https://en.wikipedia.org/wiki/Gaussian_filter#/media/File:Ga..., and a Gaussian blur is taking so much of each pixel value, most from the closest ones, less from further away, negligible by two standard deviations away, but only asymptotic to zero; hence the “theoretically infinite extent” the spec note mentioned. But the ¾√2π thing will probably be good enough forever.

refulgentis 2y ago

This is claptrap: "This effect helps us add depth and realism to our projects." -- when was the last time you, dear reader, saw frosted glass? Let's be real: it's because it was in iOS 7, Apple never moved on from that look and feel, and Apple is Apple. (n.b. a winking opinion, and a mild homage to Apple lore, not a genuine rebuke: https://folklore.org/Round_Rects_Are_Everywhere.html https://folklore.org/Round_Rects_Are_Everywhere.html)

satvikpendem 2y ago
Lots of sites these days are using that frosted glass effect, I recall seeing it on the Linear site recently.

hanifbbz 2y ago

The tutorial itself is next level with stunning interactive visual story telling.

8n4vidtmkvmk 2y ago
All of Josh's tutorials are like this. Check out some of his others!

deleted 2y ago

[deleted]

kamens 2y ago

Josh your work is amazing

sureIy 2y ago

This is the sort of completely unnecessary details that eat hours of your time and add tons of code and maintenance for something that few-to-none notice. It's great to experiment, but don't use this in projects that you intend to maintain. Signed, someone who used to do this a lot.

probabletrain 2y ago
I think "tons of code and maintenance" is an exaggeration for this effect, once it's done you'll rarely have to come back to it. Many people value creating and using products with these kinds of details, I disagree with "don't use this in projects you intend to maintain" as across-the-board advice.
- sureIy 2y ago
  > is an exaggeration for this effect I disagree. Check the changes required to the spacing/sizing. Soon you will need to adjust those values and that.is.maintenance. Multiply this by each detail and soon you have more work than you signed up for. This is usually when someone comes along and wants a rewrite because the codebase is fragile.
  - anamexis 2y ago
    Why would you need to adjust any spacing/sizing values for for the blur? There’s not much of anything to adjust.
  - henriquez 2y ago
    If you're using a CSS preprocessor like SCSS or LESS you can just define the height for the toolbar as a variable and then use the mask area for the blur as a multiplier (eg. 1.88) of that variable. In general for making things easy.to.maintain it's better to not build project-wide stylesheets with raw CSS.
    - ksymph 2y ago
      You don't even need a preprocessor for that with var() and calc(). It's perfectly possible to write clear and easily maintainable raw CSS nowadays.

eps 2y ago

> Application error: a client-side exception has occurred (see the browser console for more information). A bit too "next-level" for my iPad it seems.

lbotos 2y ago

love this post just for the example of filter: hue-rotate(0deg); That's one I've never seen before!

vintagedave 2y ago

I added this to https://cppbuilder.com/ https://cppbuilder.com/ which used to use a standard blur for the header background. It's very subtle, especially with the bottom border turned off, but I appreciate the knowledge of it being a 'better', ie a more real effect matching how real-world light or glass works. Feels like doing it right. Firefox on Mac _may_ have a slight lag scrolling now which Chrome does not show. Not mentioned in the article (that I saw) is that despite being a background blur it will affect all elements placed in the header, even with z-index higher than the blur, unless you mark them `position: relative;`. I added that style to my nav container.

zipy124 2y ago
The scrolling lag also makes it unsuable on Firefox mobile, my s24 ultra chugs hard on the top part of the website...
- vintagedave 2y ago
  Thanks. I reverted the code. A simple blur-behind is significantly faster.
hulium 2y ago
Isn't it a bit unnecessary to add blur when the website is almost completely black? Maybe put some screenshots on the page.
- vintagedave 2y ago
  You're probably right, but I enjoyed the effect as text and graphics slid under the header. Originally I was going to have the header and page different colours. I may add more graphics soon!

spiffyk 2y ago

These effects are all pretty, but like... there should be some sort of media query for devices that are not that powerful (or their owners simply do not wish to burn through their batteries just to read a website). It gets pretty annoying that my phone slows down to a crawl when someone has these effects on their website. At the same time, simply opting out of the blurring and leaving everything else as-is is not a solution, since that may quickly render a lot of things unreadable.

cons0le 2y ago
Absolutely. None of these look good to me. I would rather just have plain text. I wish all of these fancy sites would at least include a plain text / simplified reader mode by default. Front end stuff is getting way too over engineered .

zipy124 2y ago

My Samsung s24 ultra chugs at like 10fps or lower when scrolling on this site. Needless to say I won't be taking recommendations from the author, if I can't use their website smoothly on one of the most Powerful phones on the market.

fellowniusmonk 2y ago
What browser are you using? My phone is a fair bit older and downmarket than that and has no issues.
jchw 2y ago
Interesting. This page is easily max framerate on my Pixel 4a, which I'd expect since the effects should be hardware accelerated fairly easily...
- Sateeshm 2y ago
  Fellow 4a user (best small phone ever). It's perfectly fine for me too.

jp1016 2y ago

this effect is nextlevel, i use it for almost all my personal projects. i have created a library for generating frosted glass effect. https://github.com/JP1016/react-icon-blur https://github.com/JP1016/react-icon-blur

Etheryte 2y ago

Last time this article came up, I voiced my opinion that instead of a blog post, this should've probably been a bug report either for the browser or the CSS spec itself. Since this got posted again, I went and looked for one and boy did it not disappoint: there's an ongoing ticket that's now been open for eight years [0]. Granted, that ticket and the related spec cover much more than just this behavior, but the underlying issue is the same. If you look through related tickets on e.g. Chromium, you'll see plenty that are closed as won't fix exactly because of this, the spec itself doesn't account for all the use cases. [0] https://github.com/w3c/fxtf-drafts/issues/53 https://github.com/w3c/fxtf-drafts/issues/53

madeofpalk 2y ago

backdrop-filter: blur() is still annoyingly buggy and inconsistent between browsers. I just ran into this this week - Chrome doesn't supported nested/stacked blurred backgrounds, whereas Firefox does. https://codepen.io/joshhunt/full/GgKZKed https://codepen.io/joshhunt/full/GgKZKed Also ran into odd colour issues in Firefox when combining it also with opacity.

fracus 2y ago

This was one of the most effective tutorials I've read on HN. Define everything and hold our hands the entire way. I find I'm often frustrated reading tutorials on HN because they are often littered with ambiguous language, undefined labels, and incorrect assumptions on the reader's prior knowledge.

bldng 2y ago

The recent posts around frosted glass reminded me of an exploration I did a while ago, using perspective and svg filters (feTurbulence and feDisplacementMap) to simulate an actual rough surface. https://sg5omz.csb.app/ https://sg5omz.csb.app/ Chrome & Safari render it differently but interesting, Firefox is skipping it completely … I‘d need to look into it. Anyway, just wanted to share it :)