# Scroll Lag from backdrop-filter Overuse

**Applies when:** investigating scroll jank, GPU compositing issues, or paint storms on any page with many Card components

The /projects page had 73 elements with `backdrop-filter` causing massive GPU compositing on every scroll frame. Each `backdrop-filter: blur()` forces the GPU to sample and blur all pixels behind the element on every frame.

**Key sources removed:**
- `body { background-attachment: fixed }` in global.scss — forces full repaint every scroll frame. Replaced with `body::before` pseudo-element using `position: fixed`.
- `Card.module.scss` had `backdrop-filter: blur(16px) saturate(180%)` on every card — replaced with `color-mix()` solid background.
- `ProjectCard.module.scss` `.statusBadge` had `backdrop-filter: blur(8px)` — removed.
- `ProjectCard.module.scss` `.progressCircle::before` had `backdrop-filter: blur(2px)` — removed.

**Kept:** Header `backdrop-filter` (single element, important UX). Added `will-change: transform` to promote to own compositing layer.

**Added:** `content-visibility: auto` on `.projectList > *` to skip rendering off-screen cards.

**Method:** Element count via Chrome DevTools `$$('[style*=backdrop], *').filter(...)` and Performance panel paint profiling.
