Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Making Apple Progressive Blur on the Web

devslovecoffee.com

Post reply on HN
Print view View original

51–58 of 58 posts

Re: Making Apple Progressive Blur on the Web

#51

Post by CSSer »

kalleboo wrote: post #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…

Experience 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.

Re: Making Apple Progressive Blur on the Web

#52

Post by NBJack »

bmitc wrote: post #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.

I 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.

Re: Making Apple Progressive Blur on the Web

#53

Post by devslovecoffee »

Reason077 wrote: post #45

Uh oh! "402: PAYMENT_REQUIRED Code: DEPLOYMENT_DISABLED This Deployment has been disabled. Your connection is working correctly. Vercel is working correctly."

Heh, 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

Re: Making Apple Progressive Blur on the Web

#54

Post by cozzyd »

jsheard wrote: post #14
larrysalibra wrote: post #13

Earlier quoted context omitted.

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?

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.

Works for me with Firefox on a pixel 8...

Re: Making Apple Progressive Blur on the Web

#55

Post by micromacrofoot »

i5-2520M wrote: post #49
micromacrofoot wrote: post #41

Earlier quoted context omitted.

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.

Right, this is changing gradually but single thread performance is still king on the web.

Re: Making Apple Progressive Blur on the Web

#56

Post by pc2slow4webpack »

devslovecoffee wrote: post #53
Reason077 wrote: post #45

Uh oh! "402: PAYMENT_REQUIRED Code: DEPLOYMENT_DISABLED This Deployment has been disabled. Your connection is working correctly. Vercel is working correctly."

Heh, 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

Now seeing a 404

Re: Making Apple Progressive Blur on the Web

#57

Post by Reason077 »

pc2slow4webpack wrote: post #56
devslovecoffee wrote: post #53

Earlier quoted context omitted.

Heh, 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

Now seeing a 404

https://www.devslovecoffee.com/blog/making-apple-progressive...

Re: Making Apple Progressive Blur on the Web

#58

Post by 6yyyyyy »

delusional wrote: post #36
blt wrote: post #20

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.

The css image effects should hopefully be implemented with GPU shaders on most modern platforms.

A 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
Post reply on HN