Live data from Hacker News

Making Apple Progressive Blur on the Web

devslovecoffee.com

41–50 of 58 posts

Re: Making Apple Progressive Blur on the Web

#41
post #16

Earlier quoted context omitted.

I really like the effect but im also on safari on a newer macbook this machine is practically made just to render blurs well

Works fine in Safari on my iPhone, too. Curious if Apple is doing something in hardware.

they mostly make it overpowered, iphone processors are a couple years ahead most android flagships

for the average non-gamer your iphone is probably the most powerful computer they own

Re: Making Apple Progressive Blur on the Web

#42
> Throughout the years, apple consistently delivers great design.

I personally would rephrase this as "Apple consistently markets their design as great". Apple is probably the best example of how far marketing and PR can get you with fairly run of the mill design.

Re: Making Apple Progressive Blur on the Web

#43
post #3

> Throughout the years, apple consistently delivers great design. They seem to always define (or at least popularize) a new trend, which then storms the world and everyone copies it To the loss of everyone. This is the same company that introduced disappearing scrollbars, just one of many dumb design decisions. What modern design seems to forget, is that at the end of the day, people actually want to USE the interfac…

Apple also introduced an accessibility setting with the disappearing sidebar that forces all apps on macOS to show the sidebar at all times. I use it [1], it’s great. It’s not Apple’s fault that designers on other platforms copy their designs but not their accessibility.

[1] And yes, because I use it, I obviously agree that the design is one of those classic “form over function” things that shouldn’t have happened in the first place.

Re: Making Apple Progressive Blur on the Web

#44
post #3

> Throughout the years, apple consistently delivers great design. They seem to always define (or at least popularize) a new trend, which then storms the world and everyone copies it To the loss of everyone. This is the same company that introduced disappearing scrollbars, just one of many dumb design decisions. What modern design seems to forget, is that at the end of the day, people actually want to USE the interfac…

It’s quite ironic that we have bigger, higher resolution screens than ever before, and yet we have eschewed visible controls and detail/texture in favour of minimalism and flat design. I get why: design trends from mobile have moved upwards to desktops. But man, I find myself missing Leopard-era macOS design a lot lately.

I think of modern flat design as a reaction to the opulent skeuomorphism that had gone too far 10 years ago. My problem is that I hate the flatness, and liked more of the older interfaces. If I had the option of looking at Windows 95-style interfaces forever instead of whatever we have now, I'd go with Windows 95.

Oh wait: https://github.com/grassmunk/Chicago95

Re: Making Apple Progressive Blur on the Web

#46

I always thought of this so-called “progressive blur” as simply being a Gaussian blur with a kernel gradient mask whose channel range was used as the coefficient for the kernel size for a given pixel. So where the kernel gradient mask is 1, you multiply this by the desired max radius blur, down to 0, which represents a radius blur of 0. Edit: Why downvote this? It’s literally how you implement it.

Probably because this is irrelevant to the topic of CSS, since CSS only has a handful of fixed-function filters.

Re: Making Apple Progressive Blur on the Web

#47
When I was still doing web development, I developed Safari-first (our target market was on Macs anyway), and then tested in Chrome later, and I would always run into issues like the one in this blog where adding a border-radius broke something, or if you did this specific thing, scrolling slowed down to a crawl.

So I always thought it was weird when people complained that Safari was the buggy one holding the web back, since I was always running into Chrome bugs/performance pits instead. (typically Firefox worked great)

This just reinforces my notion that these people complaining developed within their known Chrome constraints (Chrome developers known intuitively what you can't do), and then ran into Safari bugs, whereas if they developed within Safari constraints and then moved to Chrome, they'd run into just as many bugs.

Re: Making Apple Progressive Blur on the Web

#48
I've hit that overflow issue; it's a real bummer cause the effect is so much simpler to achieve if it worked in Chrome!

I played around with the idea using the simple single backdrop-filter and had some success with inheriting the border-radius from the parent element onto the caption element. Would that possibly work in your multi-backdrop-filter approach?

https://codepen.io/cdrini/pen/vYMReOg

Re: Making Apple Progressive Blur on the Web

#49

Earlier quoted context omitted.

Works fine in Safari on my iPhone, too. Curious if Apple is doing something in hardware.

they mostly make it overpowered, iphone processors are a couple years ahead most android flagships for the average non-gamer your iphone is probably the most powerful computer they own

The obly aspect they are consistently ahead is single thread performance compared to Snaodragon. GPU has been behind for a few gens.

Re: Making Apple Progressive Blur on the Web

#50
post #22

The solution of the author have a big flaw: it render at 5 fps on mobile.

Would this be a practical approach if one needs/wants real-time blur effects? I thought this was primarily for making my website’s static menu background look like it’s behind Vaseline.

The issue here is that when you scroll you can notice how the website lag behind your finger and scroll with a few fps.
Post reply on HN