docs initial

2026-04-06 01:44:58 +03:00
parent 2a344ad588
commit 694b8bc77c
84 changed files with 6922 additions and 298 deletions
@@ -0,0 +1,17 @@
+# 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.