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 6245722aa2
commit 38a6e132b0
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); 0 18px 44px -16px rgba(0, 0, 0, 0.6);
} }
.glass-card { .glass-card {
background: color-mix(in srgb, var(--card) 78%, transparent); /* No backdrop-filter here: cards render in bulk (feed grid) over a solid background
backdrop-filter: blur(12px) saturate(1.3); where blur adds almost nothing visually but is GPU-expensive and triggers reflow.
-webkit-backdrop-filter: blur(12px) saturate(1.3); 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); border: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
box-shadow: 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); 0 8px 22px -14px rgba(0, 0, 0, 0.45);
} }
.glass-hover:hover { .glass-hover:hover {