From 26b4d5f172b7e0f22d9238e146332841522acb99 Mon Sep 17 00:00:00 2001 From: Eduard Gert Date: Thu, 20 Aug 2026 12:22:38 +0200 Subject: [PATCH] fix: image zoom overlay flickering on close The closing fade-out ran without animation-fill-mode: forwards, so when the 200ms animation finished the overlay snapped back to full opacity until React's unmount timeout fired, flashing for a frame or two. Holding the animation end state covers that gap. Co-Authored-By: Claude Fable 5 --- src/styles/tailwind.css | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css index 277be32a..8d9e330a 100644 --- a/src/styles/tailwind.css +++ b/src/styles/tailwind.css @@ -124,7 +124,10 @@ video.imagewrapper-big { } .image-zoom-overlay.closing { - animation: fadeOut 0.2s ease-out; + /* forwards holds opacity 0 after the animation ends, covering the gap + until React's unmount timeout fires (otherwise the overlay snaps back + to full opacity for a frame). */ + animation: fadeOut 0.2s ease-out forwards; } .image-zoom-content { @@ -138,7 +141,7 @@ video.imagewrapper-big { } .image-zoom-content.closing { - animation: zoomOut 0.2s ease-out; + animation: zoomOut 0.2s ease-out forwards; } .image-zoom-close {