From 65ea9b651cb626c71c77b0fffbcffb862bc334b1 Mon Sep 17 00:00:00 2001 From: d3v1l1989 <64855033+d3v1l1989@users.noreply.github.com> Date: Mon, 8 Jun 2026 15:57:47 +0200 Subject: [PATCH] fix(web): drop backdrop-blur from Pill card overlay preset (#89) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The Pill overlay preset was the only one of the five to carry `backdrop-blur-sm` (backdrop-filter: blur(4px)) on its badge class. Each enabled badge renders its own element, so a typical library grid produces hundreds of backdrop-filter layers the browser must re-sample and blur on every repaint — including every scroll frame, since the poster art behind each badge moves while scrolling. This caused severe scroll/interaction jank, most visibly on Chrome on Windows. The blur is also effectively invisible: the Pill background is already rgba(20,20,30,0.7) (70% opaque), so removing it has no meaningful visual impact while eliminating the per-frame GPU cost. The other four presets are unaffected. --- web/src/lib/overlays/presets.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/src/lib/overlays/presets.ts b/web/src/lib/overlays/presets.ts index 61098f53..5340e7de 100644 --- a/web/src/lib/overlays/presets.ts +++ b/web/src/lib/overlays/presets.ts @@ -60,7 +60,7 @@ export const OVERLAY_PRESETS: Record = { label: "Pill", description: "Larger pill with more padding. Works well with icons.", badgeClass: - "rounded-full border border-white/15 px-2.5 py-1 text-[10px] font-semibold tracking-wide uppercase leading-none backdrop-blur-sm", + "rounded-full border border-white/15 px-2.5 py-1 text-[10px] font-semibold tracking-wide uppercase leading-none", badgeStyle: (accent) => ({ background: accent ? `color-mix(in srgb, ${accent} 20%, rgba(20,20,30,0.7))`