[HN Gopher] Making Apple Progressive Blur on the Web
___________________________________________________________________
Making Apple Progressive Blur on the Web
Author : devslovecoffee
Score : 76 points
Date : 2024-04-06 07:49 UTC (1 days ago)
(HTM) web link (www.devslovecoffee.com)
(TXT) w3m dump (www.devslovecoffee.com)
| a3w wrote:
| Scrolling up and down on this website, the top "progressive blur"
| was annoying: too strong in the vertical expansion, on too small
| an area in the height used.
| bastawhiz wrote:
| It also had noticable lag on my Pixel 6 Pro, which while not
| super new, isn't exactly a low-end device.
| jsheard wrote:
| The performance is terrible for me too and I'm using last
| year's Snapdragon flagship, it feels like it's dropping to
| something like 15-20fps when scrolling. God help anyone
| trying to read this on a lower end device.
| sebtron wrote:
| It is readable but painful on my 7 year old mid-range
| Android phone.
| larrysalibra wrote:
| Silky smooth on both a two year old Snapdragon 8 Gen 1
| (Xiaomi 12) using both Chrome and Firefox and on a iPhone
| Pro Max 15 using Safari. Might be some other problem with
| your phone?
| jsheard wrote:
| It seems the issue is specific to Firefox for me, if I
| switch over to Chrome it's perfectly smooth.
|
| Strange that Firefox works fine for you on a slightly
| older version of the same platform.
| larrysalibra wrote:
| Actually realized I was using Firefox Focus on that
| Snapdragon 8 Gen 1. Just downloaded Firefox to try it and
| it's also the same as Firefox Focus...no issue. Could it
| be an extension? Fwiw, I don't have any extensions
| installed on any of the browsers.
| c-fe wrote:
| I really like the effect but im also on safari on a newer
| macbook this machine is practically made just to render blurs
| well
| JumpCrisscross wrote:
| Works fine in Safari on my iPhone, too. Curious if Apple is
| doing something in hardware.
| micromacrofoot wrote:
| 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
| 38 wrote:
| > 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 interface, not just look at
| it.
| simonklitj wrote:
| I don't disagree in principle. But people also have to look at
| the interface while using it. There's a balance, for sure, but
| strict utilitarian design is a no for me.
| collias wrote:
| Why not both?
| tredre3 wrote:
| Disappearing scrollbars on the desktop is the bane of my
| existence. Gnome is unusable to me for this reason (it can be
| worked around but it doesn't always work and I don't want to
| fight my OS).
| deergomoo wrote:
| 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.
| theandrewbailey wrote:
| 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
| nozzlegear wrote:
| 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.
| blueprint wrote:
| is there a reason the author refuses to capitalize "Apple"?
| freedomben wrote:
| Based on the pattern and other words that aren't capitalized
| like "vision" in "apple vision OS", I would guess it's as
| simple as "author used speech to text and apple is a word that
| is common in the English language and isn't usually a proper
| noun so isn't capitalized automatically."
| dagmx wrote:
| Nit: all Apple OS's are camelCase marks.
| brookst wrote:
| Or camelCASE really.
| devslovecoffee wrote:
| no special reason, no text to speech used either. I don't
| usually think about stuff like that when writing, but I will in
| the future. Thanks for the feedback
| dagmx wrote:
| Something that's wrong about this blur is that it's expanding
| everything that's content on the page outwards, but not expanding
| things inwards from outside the fold as well.
|
| This gives the illusion that there's a fisheye or barrel
| distortion at the edge. You can see this most strongly when the
| images get to the top edge. The edges of the image curve
| outwards.
|
| Apples blur doesn't do that. It seems to expand the content
| outwards and then blur it uniformly from there. This means that
| the lines of the image do become fuzzier (as a blur would) but
| they effectively seem to be axis aligned, as you get the
| background blurring inwards as well reducing the effect of
| expansion.
|
| There also seems to be some pre-emptive blurring that adds to
| that. If I bring an image near the top edge but not under the
| blur section, the top edge will be a blurred copy of the image,
| then fall into the background and then to the crisp image.
| devslovecoffee wrote:
| those sound like great enhancements and something to explore in
| part 2, thanks for the inspo
| blt wrote:
| I suppose implementing effects like this in CSS instead of GPU
| shaders is the modern version of implementing a 3D spinning cube
| on an 8-bit home computer. Pushing the hardware to its limits is
| now too open-ended, so we push specifications to their limits
| instead.
| delusional wrote:
| The css image effects should hopefully be implemented with GPU
| shaders on most modern platforms.
| internetter wrote:
| > aka for the rest of the world not using swiftUI
|
| Fun fact: Apple doesn't let us use CAFilter in SwiftUI. It's a
| "them" privilege, and if we want it we need to do it ourselves*,
| just like you
|
| * or obfuscate the code and continue in the great game of cat and
| mouse:
| https://github.com/aheze/VariableBlurView/blob/main/Sources/...
| devslovecoffee wrote:
| Wow, didn't even know that. Guess I'll update the post with
| this "fun" fact
| ivanjermakov wrote:
| Walled garden (with barbed wire)
| internetter wrote:
| While it's not great to provide a UI library but not give
| developers all of the UI components, theoretically you could
| implement this yourself -- so it's the least of your
| concerns: https://boehs.org/node/private-apis
| Kuinox wrote:
| The solution of the author have a big flaw: it render at 5 fps on
| mobile.
| nativeit wrote:
| 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.
| gampleman wrote:
| Isn't this the sort of thing that Houdini was supposed to solve?
| firefoxd wrote:
| I built an webapp for my kids that was supposed to run on a
| raspberry pi plugged to a 4k tv. Having these blurred tiles that
| swoosh on the screen looks amazing on my laptop.
|
| Running this on the RP4 was less than 1fps. Turned off the blur
| it works great, even the animation is great.
|
| Tested blur on a static element, the entire page crawls. These
| effects looks great, but are performance hogs.
| devslovecoffee wrote:
| Yeah, the performance takes a hit and I can see it being
| unusable on a lot of devices. As I say in the post, "(the blur)
| just plainly shouldn't be used anywhere on the web", at least
| not in this form.
| onion2k wrote:
| It used to be the case that some CSS was hardware accelerated
| in one browser and not in another. I haven't checked in a long
| time but that would explain the perf difference.
| IshKebab wrote:
| Yeah unfortunately this implementation is wrong because the blur
| doesn't use pixel data from above the top of the screen which
| results in terrible flickering when you scroll.
|
| Bit of a shame because the static effect is quite nice.
| butz wrote:
| Put another blurred block at the top and you have a tilt-shift
| effect to make your scenes look like a miniatures.
| malet wrote:
| Surely the right approach for this is to use canvas, so you only
| pay the performance penalty once on startup
| andrewmcwatters wrote:
| 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.
| bmitc wrote:
| > 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.
| Reason077 wrote:
| Uh oh!
|
| "402: PAYMENT_REQUIRED Code: DEPLOYMENT_DISABLED
|
| This Deployment has been disabled.
|
| Your connection is working correctly.
|
| Vercel is working correctly."
___________________________________________________________________
(page generated 2024-04-07 23:01 UTC)