From a9bf44574722bc9ed905c90a529f9d990c76263c Mon Sep 17 00:00:00 2001 From: syoul Date: Mon, 23 Mar 2026 22:05:37 +0100 Subject: [PATCH] fix: force reflow avant reset des transitions CSS du crossfade MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Sans forcer un reflow, le browser ignore transition:none et applique encore l'ancienne transition — causant un bug visuel sur la 1ère frame. void canvas.offsetWidth flush les styles en attente. Co-Authored-By: Claude Sonnet 4.6 --- src/components/HeatMap.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/HeatMap.tsx b/src/components/HeatMap.tsx index 9c67cd7..ef12da7 100644 --- a/src/components/HeatMap.tsx +++ b/src/components/HeatMap.tsx @@ -91,20 +91,20 @@ export function HeatMap({ transactions }: HeatMapProps) { return; } - // 1. Hide canvas instantly (no transition) - canvas.style.transition = 'none'; - canvas.style.opacity = '0'; - // 2. Freeze current frame in the overlay try { overlay.src = canvas.toDataURL(); } catch { // canvas tainted (shouldn't happen with heatmap-only canvas) - canvas.style.opacity = '1'; update(); return; } + + // 1. Reset transitions instantly — force reflow to flush any running transition + canvas.style.transition = 'none'; overlay.style.transition = 'none'; + void canvas.offsetWidth; // force reflow + canvas.style.opacity = '0'; overlay.style.opacity = '1'; // 3. Update heatmap (invisible: canvas still at opacity 0)