From 5162f76463aee0795fe32bc621818c13a3a566cc Mon Sep 17 00:00:00 2001 From: Raigato Date: Sun, 22 Mar 2026 14:13:42 +0100 Subject: [PATCH] fix: prevent scroll jump and horizontal overflow on theme transition Save and restore vertical scroll position around the theme transition to prevent mobile browsers from scrolling when anchor innerHTML is restored. Switch textContent reads to innerText so the scramble animation only operates on visible text, fixing horizontal overflow caused by hidden responsive spans being included in the scramble string. --- src/components/ThemeTransition.astro | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/ThemeTransition.astro b/src/components/ThemeTransition.astro index 3c9573c..66bd3db 100644 --- a/src/components/ThemeTransition.astro +++ b/src/components/ThemeTransition.astro @@ -14,13 +14,15 @@ return } + const savedScrollY = window.scrollY + const selectors = 'h1, h2, h3, h4, nav a, button, .font-mono' const targets = [...document.querySelectorAll(selectors)].filter((el) => { - const text = el.textContent?.trim() ?? '' + const text = el.innerText?.trim() ?? '' return text.length > 0 && text.length <= 60 && !el.querySelector(selectors) }) - const originals = targets.map((el) => el.textContent ?? '') + const originals = targets.map((el) => el.innerText ?? '') const originalHTMLs = targets.map((el) => el.innerHTML) let frame = 0 const totalFrames = 20 @@ -59,6 +61,7 @@ targets.forEach((el, i) => { el.innerHTML = originalHTMLs[i] }) + window.scrollTo({ top: savedScrollY, behavior: 'instant' }) window.dispatchEvent(new CustomEvent('theme-transition-complete')) } }, 30)