fix(web): drop backdrop-blur from Pill card overlay preset (#89)
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.
This commit is contained in:
@@ -60,7 +60,7 @@ export const OVERLAY_PRESETS: Record<PresetId, OverlayPreset> = {
|
||||
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))`
|
||||
|
||||
Reference in New Issue
Block a user