- Shipped
- August 20, 2026 at 3:17 AM UTC
- Author
- Kamo
- Commit
- 91aaf68
The homepage renders 94 elements carrying `backdrop-filter: blur(20px)`. Every one is a separate compositing layer that has to read back everything painted behind it and run a gaussian blur at device resolution, and four of them are in the sticky nav, so those repeat on every scroll frame. On the mid-range phone the mobile score is measured on, that is the most expensive thing the renderer is asked to do, and it lands in exactly the window Lighthouse bills as LCP "element render delay" — 1,660 ms of it, against an image that finished downloading at 890 ms. Cheap to fetch, expensive to paint. Below 768px the blur is dropped. What delineates these panels is their own translucent background and their border; the frosting is only really visible where a panel sits over one of the photographic section backdrops. Desktop keeps the effect untouched — it scores 98 and its GPUs absorb this comfortably. The attribute selector is deliberate rather than lazy. These are inline styles written by the components, and an inline declaration cannot be overridden by an ordinary rule, so matching on the attribute is what lets one rule reach all 94 without editing every call site. Also drops `will-change` from the hero backdrop on phones. It exists for the 12-second crossfade between frames, and that rotation is desktop-only — HeroBackdrop gates it on `(min-width: 768px)` and mounts a single frame otherwise. So on mobile it was asking the compositor to hold a permanent full-viewport layer, primed for a filter animation that never runs, on the LCP element itself. The filter still applies; only the promotion hint goes.