peter/siftlode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

perf(ui): drop backdrop-filter from bulk glass cards

Browse source 
Video cards / channel rows / sidebar widgets render in bulk over a solid background
where backdrop blur adds little but is GPU-expensive and triggers forced reflow
(browser perf 'Violation' logs). Keep translucency + depth; reserve blur for the few
.glass overlay surfaces (menus, panels, toasts, tooltips).
This commit is contained in:
npeter83 2026-06-11 22:04:01 +02:00
parent 3f4d5ed9d7
commit b7d448b403
1 changed files with 5 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

9
frontend/src/index.css
View file

@ -43,12 +43,13 @@ body {
0 18px 44px -16px rgba(0, 0, 0, 0.6);
}
.glass-card {
background: color-mix(in srgb, var(--card) 78%, transparent);
backdrop-filter: blur(12px) saturate(1.3);
-webkit-backdrop-filter: blur(12px) saturate(1.3);
/* No backdrop-filter here: cards render in bulk (feed grid) over a solid background
where blur adds almost nothing visually but is GPU-expensive and triggers reflow.
Translucency + border + depth keep the look; blur is reserved for .glass overlays. */
background: color-mix(in srgb, var(--card) 84%, transparent);
border: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
box-shadow:
inset 0 1px 0 color-mix(in srgb, #fff 9%, transparent),
inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent),
0 8px 22px -14px rgba(0, 0, 0, 0.45);
}
.glass-hover:hover {