12 ms·
Making Apple Progressive Blur on the Web
- a3w 3y agoScrolling 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 3y agoIt also had noticable lag on my Pixel 6 Pro, which while not super new, isn't exactly a low-end device.
- jsheard 3y agoThe 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 3y agoIt is readable but painful on my 7 year old mid-range Android phone.
- larrysalibra 3y agoSilky 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 3y agoIt 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 3y agoActually 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.
- cozzyd 3y agoWorks for me with Firefox on a pixel 8...
- c-fe 3y agoI really like the effect but im also on safari on a newer macbook this machine is practically made just to render blurs well
- JumpCrisscross 3y agoWorks fine in Safari on my iPhone, too. Curious if Apple is doing something in hardware.
- micromacrofoot 3y agothey 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
- i5-2520M 3y agoThe obly aspect they are consistently ahead is single thread performance compared to Snaodragon. GPU has been behind for a few gens.
- micromacrofoot 3y agoRight, this is changing gradually but single thread performance is still king on the web.
- 38 3y ago> 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 3y agoI 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 3y agoWhy not both?
- tredre3 3y agoDisappearing 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).
- deleted 3y ago[deleted]
- deergomoo 3y agoIt’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 3y agoI 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 https://github.com/grassmunk/Chicago95
- blueprint 3y agois there a reason the author refuses to capitalize "Apple"?
- freedomben 3y agoBased 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."
- devslovecoffee 3y agono 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 3y agoSomething 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 3y agothose sound like great enhancements and something to explore in part 2, thanks for the inspo
- blt 3y agoI 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 3y agoThe css image effects should hopefully be implemented with GPU shaders on most modern platforms.
- 6yyyyyy 3y agoA dedicated shader could do it far more efficiently. Ideally, you would create a mip chain, then as you move towards the blurrier parts of the image, spread your taps farther apart and choose them from lower-resolution mips. You could even have an animated "blur map" to control where the blur is, and it would run at 60 fps ez. This runs at 165 fps in Shadertoy for me (warning all constants are wild guesses, use "pebbles" for iChannel1): void mainImage( out vec4 fragColor, in vec2 fragCoord ) { // Normalized pixel coordinates (from 0 to 1) vec2 uv = fragCoord/iResolution.xy; float blurRadius = clamp(1.5 * (texture(iChannel1, uv/2.0 + vec2(iTime, iTime / 2.0)/6.0).x - 0.5) + 0.5, 0.0, 1.0); float mipmapLevel = fwidth(uv).x; float biasedMip = mipmapLevel + blurRadius * 4.0; vec3 final = (3.0/8.0) * textureLod(iChannel0, uv, biasedMip).xyz; for (float i = 0.0; i < 6.28; i += 6.28/5.0) { final += (1.0/8.0) * textureLod(iChannel0, uv + 0.02 * blurRadius * vec2(sin(i), cos(i)), biasedMip).xyz; } // Output to screen fragColor = vec4(final.xyz,1.0); }
- internetter 3y ago> 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/VariableBlurView.swift#L73-L112 https://github.com/aheze/VariableBlurView/blob/main/Sources/...
- devslovecoffee 3y agoWow, didn’t even know that. Guess I’ll update the post with this “fun” fact
- ivanjermakov 3y agoWalled garden (with barbed wire)
- internetter 3y agoWhile 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 https://boehs.org/node/private-apis
- Kuinox 3y agoThe solution of the author have a big flaw: it render at 5 fps on mobile.
- nativeit 3y agoWould 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.
- Kuinox 3y agoThe issue here is that when you scroll you can notice how the website lag behind your finger and scroll with a few fps.
- deleted 3y ago[deleted]
- gampleman 3y agoIsn’t this the sort of thing that Houdini was supposed to solve?
- firefoxd 3y agoI 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 3y agoYeah, 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 3y agoIt 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 3y agoYeah 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 3y agoPut another blurred block at the top and you have a tilt-shift effect to make your scenes look like a miniatures.
- malet 3y agoSurely the right approach for this is to use canvas, so you only pay the performance penalty once on startup
- andrewmcwatters 3y agoI 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.
- kalleboo 3y agoProbably because this is irrelevant to the topic of CSS, since CSS only has a handful of fixed-function filters.
- bmitc 3y ago> 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.
- NBJack 3y agoI agree. I recall the first time I used an Apple device after the "corner swipes" became the norm. I was shocked at how challenging it was to get right, then puzzled by the lack of any labels on what I saw. I recall thinking, "this really isn't a simple or intuitive design". Apple designs are certainly gorgeous and well marketed, but there are multiple instances where their design seems to stand in the way of utility and practicality.
- Reason077 3y agoUh oh! "402: PAYMENT_REQUIRED Code: DEPLOYMENT_DISABLED This Deployment has been disabled. Your connection is working correctly. Vercel is working correctly."
- devslovecoffee 3y agoHeh, a combination of the post going viral, me using the free tier on Vercel, and some sub-optimal images I have used, caused me to use up all the free bandwidth. Vercel reached out though and promptly unlocked the web, which is very cool of them. Guess it’s now time for me to learn my lesson and optimize the images
- pc2slow4webpack 3y agoNow seeing a 404
- Reason077 3y agohttps://www.devslovecoffee.com/blog/making-apple-progressive-blur-on-web-2/ https://www.devslovecoffee.com/blog/making-apple-progressive...
- kalleboo 3y agoWhen 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.
- CSSer 3y agoExperience in teams has taught me that this is 100% correct. I even had a guy once who decided to develop using exclusively Safari for a couple weeks before giving up because he kept missing “obvious” style bugs other people would find in review. Google also built superior dev tools into Chrome in many respects. Lastly, many developers don’t or won’t ever read W3C/WhatWG/TC39/IETF specs or peruse browser bug trackers beyond solving the immediate problem they’re faced with, so blame can often be very arbitrary.
- cdrini 3y agoI'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 https://codepen.io/cdrini/pen/vYMReOg