From 9faaf5c50c60bc6c6253d8ea38a0d050b2c7982f Mon Sep 17 00:00:00 2001 From: BoulderBadgeDad Date: Sat, 27 Jun 2026 11:34:37 -0700 Subject: [PATCH] sidebar orbs: drop scale() from the drift so the blur stops re-rasterizing (#935) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit same antipattern as the dash-card blobs: .sidebar::before/::after are blur(28px) and the orb keyframes animated transform: scale() infinitely → the GPU re-blurred them every frame, on every page (the sidebar is always visible). keep the translate drift + opacity (both compositor-only, the blur layer just moves), remove the scale. same look, no per-frame reblur. --- webui/static/style.css | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/webui/static/style.css b/webui/static/style.css index 6c49ae81..f5f85ebc 100644 --- a/webui/static/style.css +++ b/webui/static/style.css @@ -142,18 +142,21 @@ body.reduce-effects .sidebar::after { display: none !important; } +/* translate + opacity only — NO scale(). The orbs are blur(28px); scaling a blurred + element re-rasterizes the blur every frame, but translating it just moves the cached + layer on the compositor (free). Same drifting glow, no per-frame re-blur (#935). */ @keyframes sidebar-orb-1 { - 0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; } - 25% { transform: translate(30px, 80px) scale(1.2); opacity: 1; } - 50% { transform: translate(-10px, 180px) scale(0.9); opacity: 0.6; } - 75% { transform: translate(20px, 50px) scale(1.15); opacity: 0.9; } + 0%, 100% { transform: translate(0, 0); opacity: 0.5; } + 25% { transform: translate(30px, 80px); opacity: 1; } + 50% { transform: translate(-10px, 180px); opacity: 0.6; } + 75% { transform: translate(20px, 50px); opacity: 0.9; } } @keyframes sidebar-orb-2 { - 0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.6; } - 30% { transform: translate(-20px, -100px) scale(1.25); opacity: 0.4; } - 60% { transform: translate(30px, -50px) scale(0.85); opacity: 1; } - 80% { transform: translate(-10px, 40px) scale(1.1); opacity: 0.5; } + 0%, 100% { transform: translate(0, 0); opacity: 0.6; } + 30% { transform: translate(-20px, -100px); opacity: 0.4; } + 60% { transform: translate(30px, -50px); opacity: 1; } + 80% { transform: translate(-10px, 40px); opacity: 0.5; } } .sidebar > * {