We removed backdrop-filter and scrolling got worse
One of our sites runs an animated starfield behind the whole page, with translucent cards floating above it. The cards carried backdrop-filter: blur(12px), and scrolling felt heavy. The blur looked guilty.
Blur is expensive, everyone knows that. So we deleted it.
Scrolling got worse. Not choppy. Sticky.
The page trailed the finger like it needed a second to think about it. When removing an expensive property makes the page slower, your model of the problem is wrong, and that is worth writing down.
backdrop-filter was doing two jobs
The visible job is the blur. The invisible job is layer promotion. A browser cannot blur a backdrop in the middle of a normal paint, so it promotes any element with backdrop-filter onto its own GPU compositing layer, snapshots what sits behind it, and caches the result. Our cards had their own layers without us ever asking.
Delete the property and each card falls back into the main paint pass. The cards stayed translucent, rgba backgrounds with alpha under 1. So every frame the starfield redrew, the main thread repainted every card above it, and scroll input queued up behind that paint work. Queued input is the sticky feeling.
Dropped frames read as choppy, delayed frames read as sticky, and the difference tells you where the time goes.
We had pulled a post without noticing it was holding up the fence.
The fix has two parts
Part one: give the cards their layers back on purpose. We added translate3d(0,0,0) to the same card selectors. A 3D translate makes the browser promote the element to its own compositing layer, same as backdrop-filter did, minus the blur cost. will-change on the same selectors does the same job.
One trap inside part one: hover. If a card lifts on hover, the hover rule replaces the base translate and the layer decomposes mid-interaction. Write the hover lift as a 3D translate too, translate3d(0, Ypx, 0), so the promotion survives the mouse.
That got us most of the way. Scroll improved and still was not right.
Part two: stop animating while the user scrolls. Nobody studies a starfield mid-scroll. A passive scroll listener flips a flag that cancels the animation loop, and a timer resumes it about 220ms after the last scroll event.
Two details matter here. Reset the animation's frame clock on resume, or it lurches forward to make up the time it missed. And route every pause source, scroll and tab visibility both, through one derived flag, or the handlers fight over restarting the loop.
With both parts in, scroll went smooth. Neither part got there alone, and we know because we shipped them one at a time.
When you can skip all of this
If the background is static, an image or a plain gradient, none of this applies. Nothing repaints per frame, so there is no paint storm to hide from. There, backdrop-filter is just cosmetic, and you can delete it cleanly with no promotion needed.
The rule we took away has two halves. Any page that pairs an always-moving background with translucent elements is a perf hot spot before you touch a line, so treat it like one. And when deleting a property makes things worse, the property was doing more than its name says.
The starfield still runs. The cards still float. And the page scrolls like it has nothing else on its mind, which is the whole trick.