Next-level frosted glass with backdrop-filter • Hacker News Board

Re: Next-level frosted glass with backdrop-filter

#51

Post by fellowniusmonk » Sat, Dec 07, 2024, 5:11 PM UTC

zipy124 wrote: post #49

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.

What browser are you using? My phone is a fair bit older and downmarket than that and has no issues.

Re: Next-level frosted glass with backdrop-filter

#52

Post by jchw » Sat, Dec 07, 2024, 5:11 PM UTC

zipy124 wrote: post #49

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.

Interesting. This page is easily max framerate on my Pixel 4a, which I'd expect since the effects should be hardware accelerated fairly easily...

Re: Next-level frosted glass with backdrop-filter

#53

Post by jp1016 » Sat, Dec 07, 2024, 5:35 PM UTC

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

Re: Next-level frosted glass with backdrop-filter

#54

Post by gjsman-1000 » Sat, Dec 07, 2024, 6:02 PM UTC

preommr wrote: post #44

probabletrain wrote: post #25

Earlier quoted context omitted.

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.

> I disagree with "don't use this in projects you intend to maintain" as across-the-board advice Backdrop-filter is... fine. Using masks, animations, and backdrop filter, and gradients, especially for fine details like edges, are just asking for trouble. Browsers are incredibly complicated, and rendering engines have lots of edge cases, broken features, slight incompatibility issues some of which vary by hardware/os/…

I’m at the point in my career where if it’s an internal project, zero shame for Bootstrap and JQuery. If that’s what floats your boat, do it. It’s simple, well understood, functional.

Re: Next-level frosted glass with backdrop-filter

#55

Post by Etheryte » Sat, Dec 07, 2024, 6:20 PM UTC

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

Re: Next-level frosted glass with backdrop-filter

#56

Post by techscruggs » Sat, Dec 07, 2024, 6:33 PM UTC

sureIy wrote: post #24

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.

It really depends on the use case. Right?

Sure, if you are building an enterprise application, this likely doesn't make any sense.

But, if you are building something for a consumer audience. Or if you are trying to differentiate yourself by building something beautiful. Then maybe wrap these 100 lines of code in a very specific class name (.fancyGlassFrostedGlass) and call it day?

Re: Next-level frosted glass with backdrop-filter

#57

Post by madeofpalk » Sat, Dec 07, 2024, 6:54 PM UTC

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

Also ran into odd colour issues in Firefox when combining it also with opacity.

Re: Next-level frosted glass with backdrop-filter

#58

Post by hulium » Sat, Dec 07, 2024, 7:07 PM UTC

vintagedave wrote: post #39

I added this to 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 art…

Isn't it a bit unnecessary to add blur when the website is almost completely black? Maybe put some screenshots on the page.

Re: Next-level frosted glass with backdrop-filter

#59

Post by fracus » Sat, Dec 07, 2024, 7:08 PM UTC

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.

Re: Next-level frosted glass with backdrop-filter

#60

Post by bldng » Sat, Dec 07, 2024, 7:17 PM UTC

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/

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 :)