From 550deeab99e0f1d95f5c83f25b4db8b221f013b8 Mon Sep 17 00:00:00 2001 From: npeter83 Date: Thu, 11 Jun 2026 22:04:01 +0200 Subject: [PATCH] perf(ui): drop backdrop-filter from bulk glass cards 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). --- frontend/src/index.css | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/frontend/src/index.css b/frontend/src/index.css index c26a98f..6420ca0 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -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 {