We shipped a beautiful aurora shader for the homepage hero last week. It looked great on desktop. It broke on every iPhone.
The problem wasn't the WebGL shader itself - that's surprisingly well-supported on mobile Safari. The problem was our decorative CSS blur orbs: 400-800px div elements with 80-150px blur filters layered across the page for ambient glow. iOS WebKit choked on them. The aurora animation stuttered, then froze. The entire page became sluggish.
Why It Broke
CSS filter: blur() is expensive. You're asking the GPU to sample and average pixels in a radius around every pixel in the element. For a 500px element with 100px blur, you're processing millions of pixels per frame. Desktop GPUs handle this fine. Mobile GPUs - especially when also rendering a WebGL canvas - do not.
We had blur orbs on almost every page: blog index, blog posts, products, team, stream, SMS signup, about, Sabine, Sports. Each page had 1-3 large blurred elements. Each one was a performance tax on mobile.
The Fix
We added hidden md:block to every blur orb across the site. Mobile gets the mesh background gradient and the lightweight aurora-animated gradient. Desktop gets the full ambient glow treatment.
It's a compromise. The mobile experience is less visually rich. But it's fast, and the aurora shader - the actual focal point - now runs smoothly on iPhone.
While We Were Here
We fixed three other mobile issues:
1. iOS Safari glass-card compatibility. Our glass-card effect used backdrop-filter: blur(12px) but was missing the -webkit- prefix. Cards looked flat on iOS.
2. Navbar mobile UX. Added click-outside dismiss, Escape key close, and a smooth slide transition using CSS grid collapse. The mobile menu now feels intentional instead of bolted-on.
3. Products page H1 normalization. Switched from arbitrary text-4xl md:text-6xl to the display scale system: text-display-lg md:text-display-xl. Consistency matters.
What We Learned
Test on real devices early. Chrome DevTools mobile emulation doesn't catch GPU performance issues. We should have tested the aurora hero on iPhone before merging.
Budget your blur. One large blur element per page is fine. Five is not. Especially on mobile. Especially when you're also running WebGL.
Progressive enhancement is still right. Start with a baseline that works on all devices, then layer on the expensive visual effects for desktop. We did it backwards this time - desktop-first with mobile as an afterthought. It showed.
What's Next
We're auditing the rest of the site for mobile performance issues. Specifically:
- Lighthouse mobile scores for all pages
- Real device testing protocol (we need a test iPhone in the office)
- Performance budget for CSS filters and transforms
- Touch target size audit (navbar hamburger is probably too small)
The site now works on iPhone. The aurora shader runs smoothly. The navbar feels intentional. And we learned that beautiful effects don't matter if they make the site unusable on 50% of devices.
Mobile-first isn't dogma. It's practical. We're back to it.