The other day I saw someone say Safari is the new IE, but I thought they were really far off base. I spent at least a decade fighting with Internet Explorer, it had so many quirks, kind of like JavaScript itself, but I never thought Safari was anything like that. But I have to say, when I came across this issue, it sure is the first thing that popped into my head.
I originally designed this site after another engineer’s portfolio site, I loved the theme, so I drew heavy inspiration from it. After a year or so, I decided it was time for a fresh coat of paint. I let AI give it a shot and it turned out... okay, but after a few days I decided it wasn't the direction I wanted to head in. So I tried again and one of the things I liked about version 2 was the background, it had a really nice effect to it, so I carried over that concept. It's basically 4 divs that get rounded then blurred, with slightly varying colors; it’s kind of like a very diffused lens flare.
I had no idea 4 divs were going to cause such a headache.
A few days after I had updated my phone I noticed my site would crawl during the initial load. The PC was fine and older versions of iOS were fine as well. That didn't really tell me enough though. What broke? How can I work around this for now?
So I investigated further. I set up my phone for remote Safari debugging and... it didn't help. The network request timeline completely ignored the large pause, like it never happened. So I went to the tool that can record everything the browser is doing. It would just keep quitting on me. Sometimes I could start the recording up at the right time and catch the time leading up to and including the initial paint, but it showed nothing! The browser seemingly thinks nothing is wrong with what's going on. The site is used professionally so I figured there aren't too many mobile users anyway, so I gave it a rest for a bit.
It was a few days later and I wanted to take another pass at it. My last few changes were just CSS, but I started with them anyway. AI was confused too, but it thought it had to do with page transitions or blur. It removed some blurs for me, but I still saw the issue. I ended up removing them all and it worked! I ended up narrowing it down to those blurry background blobs. The strangest part of it is moving them to a transition on those same elements works just fine.
I did find there was a recent update to WebKit that attempts to improve on blur performance. I'm certain it's what caused all of this. And then I found more and more and more about blur. It's not something I use often, but it seems relatively simple and easy to accelerate with hardware, but apparently not. This isn't the first time there has been an issue with it. I found posts about adding a transform to nowhere that served as workarounds in the past. I found accounts of it not working at all. I found adding "will-change: transform;" helps mitigate the issue. These issues date back for years, so apparently the WebKit team has really struggled with it historically as well.
Just an interesting little adventure. I didn't really expect to end up going down a rabbit hole because of a few lines of CSS causing massive performance issues. Originally it looked like JavaScript bug; the only thing I could determine is that it would froze up during the fetching or parsing of Cloudflare's Rocket Loader script, but it was really the immediate next step after that confusing the dev tools.