From b074f388da8fbb8c509ba7c19f7531c982e9f556 Mon Sep 17 00:00:00 2001 From: spencrmartin Date: Tue, 13 Jan 2026 14:57:53 -0500 Subject: [PATCH] fix: Simplify tile animation to eliminate flicker Simplified CSS animation approach: - Set initial opacity and transform explicitly to match keyframe 0% - Use animation-fill-mode: both to maintain states - Force exit state with !important to prevent flash - Removed complex will-change and @supports rules - Cleaner, more predictable animation behavior This ensures tiles start at the exact animation beginning state, preventing any visible flash or flicker during the swoop-in effect. --- ui/desktop/src/styles/main.css | 20 ++++++++------------ 1 file changed, 8 insertions(+), 12 deletions(-) diff --git a/ui/desktop/src/styles/main.css b/ui/desktop/src/styles/main.css index 3ed1a85602..ccf832675a 100644 --- a/ui/desktop/src/styles/main.css +++ b/ui/desktop/src/styles/main.css @@ -927,23 +927,19 @@ p > code.bg-inline-code { /* Navigation tile stagger animation with enhanced easing */ .nav-tile { - animation: nav-tile-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; - /* Start invisible, animation will make visible */ + animation: nav-tile-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); + animation-fill-mode: both; + /* Start at the first keyframe to prevent flash */ opacity: 0; - /* Prevent flickering by hinting to browser */ - will-change: opacity, transform; -} - -/* Remove will-change after animation completes to save resources */ -.nav-tile.animation-complete { - will-change: auto; + transform: translateY(24px) scale(0.92); } .nav-tile-exit { - animation: nav-tile-out 0.2s ease-in forwards; - /* Ensure we start from visible state when exiting */ + animation: nav-tile-out 0.2s ease-in; + animation-fill-mode: both; + /* Override to ensure we start from visible state */ opacity: 1 !important; - will-change: opacity, transform; + transform: translateY(0) scale(1) !important; } /* Enhanced stagger delays with better rhythm - faster start, gradual slowdown */