From 05d6fd93b5f4f2d56032ca807ea619f4bd9ef33d Mon Sep 17 00:00:00 2001 From: Ludwig Mey Date: Tue, 28 Jul 2026 21:49:54 +1200 Subject: [PATCH] =?UTF-8?q?Fix=20slideshow=20mid-transition=20flash=20?= =?UTF-8?q?=E2=80=94=20delay=20src=20change=20until=20fade-out=20completes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Changing current.src immediately triggered the new image to render while the element was still mid-opacity-transition (partially visible), causing the next queued photo to briefly flash through the crossfade. Now we wait for the transitionend event before setting the new preload src. Co-Authored-By: Claude Sonnet 4.6 --- static/js/app.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/static/js/app.js b/static/js/app.js index f103073..e14330e 100644 --- a/static/js/app.js +++ b/static/js/app.js @@ -326,9 +326,11 @@ function advanceSlide() { next.classList.add('active'); current.classList.remove('active'); activeSlot = nextSlot; - // Preload the upcoming photo into the now-hidden slot slideIndex = (slideIndex + 1) % photos.length; - current.src = photos[(slideIndex + 1) % photos.length]; + const preloadSrc = photos[(slideIndex + 1) % photos.length]; + // Only change src after the fade-out completes — changing it mid-transition + // causes the new image to appear at partial opacity (the flash the user sees) + current.addEventListener('transitionend', () => { current.src = preloadSrc; }, { once: true }); }; // If the preloaded image is ready, swap immediately; otherwise wait for it