@xingwangzhe/stalux 1.42.0 → 1.43.0

package/src/scripts/swup-router.ts

@@ -0,0 +1,366 @@
+import SwupA11yPlugin from "@swup/a11y-plugin";
+import SwupHeadPlugin from "@swup/head-plugin";
+import SwupJsPlugin from "@swup/js-plugin";
+import SwupPreloadPlugin from "@swup/preload-plugin";
+import SwupScrollPlugin from "@swup/scroll-plugin";
+import Swup, { type Visit } from "swup";
+import { getRouteKind } from "../utils/public-routes";
+import { getRouteMotionPreset, type RouteMotionPreset } from "../utils/route-motion-policy";
+import { installBackToTop } from "./back-to-top";
+import { prepareNavigationFont } from "./navigation-font";
+import "./navigation-client";
+import { prepareNavigationScripts } from "./navigation-scripts";
+import { prepareRouteMotion, type RouteMotion } from "./route-motion";
+
+interface NavigationContext {
+    controller: AbortController;
+    from: URL;
+    to: URL;
+    direction: string;
+    navigationType: "push" | "replace" | "traverse";
+    sourceElement?: Element;
+    preset: RouteMotionPreset;
+    browserMotion: boolean;
+    motion?: RouteMotion;
+    executeScripts?: (signal?: AbortSignal) => Promise<void>;
+    scriptsReady?: Promise<void>;
+    obsoleteStyles: Element[];
+}
+
+type Position = { top: number; left: number; focus?: string };
+const MAIN = "main[data-stalux-route]";
+
+function abortObsoleteVisit(visit: Visit): void {
+    // Swup 4.10 ships abort() but strips @internal members from its .d.ts.
+    // Pin core to that audited version; recheck this adapter when upgrading it.
+    (visit as Visit & { abort: () => void }).abort();
+}
+
+function dispatchNavigation(name: string, context: NavigationContext, nextDocument?: Document) {
+    const event = Object.assign(new Event(name, { cancelable: true }), {
+        from: context.from,
+        to: context.to,
+        direction: context.direction,
+        navigationType: context.navigationType,
+        sourceElement: context.sourceElement,
+        signal: context.controller.signal,
+        ...(nextDocument ? { newDocument: nextDocument } : {}),
+    });
+    document.dispatchEvent(event);
+    return event;
+}
+
+function clearMotionState(): void {
+    for (const key of ["staluxVtFrom", "staluxVtTo", "staluxVtDirection", "staluxVtPreset"])
+        delete document.documentElement.dataset[key];
+}
+
+/** Astro renders pages; Swup alone owns their client navigation and animation. */
+export function installSwupRouter(): Swup {
+    if (window.swup) return window.swup;
+    const contexts = new WeakMap<Visit, NavigationContext>();
+    const historyPositions = new Map<number, Position>();
+    let authoredStyles = [...document.head.querySelectorAll("style,link[rel=stylesheet]")];
+    let activeContext: NavigationContext | undefined;
+    let visibleHistoryIndex = Number(window.history.state?.index ?? 1);
+    let browserMotion = false;
+    const scroll = new SwupScrollPlugin({
+        doScrollingRightAway: false,
+        animateScroll: { betweenPages: false, samePageWithHash: false, samePage: false },
+        // ScrollPlugin's default callback adds one-shot wheel/scrollend
+        // listeners even for instant/no-op scrolls. Those events may never fire
+        // while navigating at the top, retaining two listeners per page visit.
+        scrollFunction: (element, top, left, _animate, start, end) => {
+            start();
+            element.scrollTo({ top, left, behavior: "instant" });
+            end();
+        },
+    });
+
+    window.addEventListener(
+        "popstate",
+        (event) => {
+            browserMotion =
+                (event as PopStateEvent & { hasUAVisualTransition?: boolean })
+                    .hasUAVisualTransition === true;
+        },
+        { capture: true },
+    );
+
+    const swup = new Swup({
+        native: false,
+        containers: [MAIN],
+        animationSelector: false,
+        animateHistoryBrowsing: true,
+        timeout: 15_000,
+        ignoreVisit: (href, { el }) => {
+            const url = new URL(href, window.location.href);
+            const target =
+                el?.getAttribute("target") ??
+                document.querySelector("base[target]")?.getAttribute("target");
+            return (
+                getRouteKind(url.pathname) === "other" ||
+                /\.(?:md|json|xml|txt|html?|pdf|png|webp|avif|svg|jpe?g)$/i.test(url.pathname) ||
+                Boolean(el?.closest("[data-no-swup],[data-astro-reload],[rel~=external]")) ||
+                Boolean(target && target !== "_self")
+            );
+        },
+        plugins: [
+            new SwupHeadPlugin({
+                awaitAssets: true,
+                // Keep old CSS readable until replacement, then prune authored
+                // orphans. Styles inserted by live SDKs remain available.
+                persistTags: (el) => el.matches("script[src],style,link[rel=stylesheet]"),
+            }),
+            scroll,
+            new SwupA11yPlugin({ headingSelector: "[data-stalux-motion-focus]" }),
+            new SwupPreloadPlugin({
+                preloadHoveredLinks: true,
+                preloadVisibleLinks: false,
+                throttle: 2,
+            }),
+            new SwupJsPlugin({
+                animations: [
+                    {
+                        from: "(.*)",
+                        to: "(.*)",
+                        out: async () => {},
+                        in: async (_done, { visit }) => {
+                            const context = contexts.get(visit);
+                            if (!context?.motion) return;
+                            context.motion.start(
+                                document.querySelector<HTMLElement>("[data-stalux-motion-focus]"),
+                                {
+                                    preset: context.preset,
+                                    browserMotion: context.browserMotion,
+                                    skip: context.controller.signal.aborted,
+                                },
+                            );
+                            await context.motion.finished;
+                        },
+                    },
+                ],
+            }),
+        ],
+    });
+    window.swup = swup;
+    document.documentElement.dataset.staluxRouter = "swup";
+    document.documentElement.dataset.staluxRoute = getRouteKind(window.location.pathname);
+    installBackToTop();
+
+    // Set this in the first synchronous before hook, even when a superseding
+    // click skips the later context handler. Swup's page:load promise must settle
+    // before an obsolete visit is stopped at the transition boundary.
+    swup.hooks.before(
+        "visit:start",
+        (visit) => {
+            visit.animation.wait = true;
+        },
+        { priority: -1000 },
+    );
+
+    swup.hooks.on("visit:start", (visit) => {
+        const focused = document.activeElement;
+        const focus =
+            focused instanceof HTMLAnchorElement
+                ? (focused.getAttribute("href") ?? undefined)
+                : undefined;
+        historyPositions.set(visibleHistoryIndex, {
+            top: window.scrollY,
+            left: window.scrollX,
+            focus,
+        });
+        if (historyPositions.size > 64)
+            historyPositions.delete(historyPositions.keys().next().value as number);
+        const from = new URL(visit.from.url + (visit.from.hash ?? ""), window.location.origin);
+        const to = new URL(visit.to.url + (visit.to.hash ?? ""), window.location.origin);
+        const navigationType = visit.history.popstate ? "traverse" : visit.history.action;
+        const context: NavigationContext = {
+            controller: new AbortController(),
+            from,
+            to,
+            navigationType,
+            direction: visit.history.direction === "backwards" ? "back" : "forward",
+            sourceElement: visit.trigger.el,
+            browserMotion: browserMotion && visit.history.popstate,
+            preset: getRouteMotionPreset({
+                from,
+                to,
+                navigationType,
+                intent:
+                    visit.trigger.el
+                        ?.closest("[data-stalux-motion]")
+                        ?.getAttribute("data-stalux-motion") ?? undefined,
+                reducedMotion: window.matchMedia("(prefers-reduced-motion: reduce)").matches,
+                browserMotion: browserMotion && visit.history.popstate,
+                hidden: document.hidden,
+            }),
+            obsoleteStyles: [],
+        };
+        browserMotion = false;
+        contexts.set(visit, context);
+        activeContext = context;
+        visit.animation.wait = true;
+        visit.a11y.focus = visit.history.popstate ? false : { selector: MAIN, wait: true };
+        if (dispatchNavigation("astro:before-preparation", context).defaultPrevented)
+            visit.ignore();
+    });
+
+    swup.hooks.before("visit:transition", (visit) => {
+        const context = contexts.get(visit);
+        // renderPage updates the URL before content:replace. A revived stale
+        // visit must stop here as well as before the later head/DOM work.
+        if (!context || context.controller.signal.aborted || visit !== swup.visit)
+            abortObsoleteVisit(visit);
+    });
+
+    swup.hooks.before(
+        "content:replace",
+        async (visit) => {
+            const context = contexts.get(visit);
+            // Swup 4 can resume a superseded async visit:start after abort. Stop
+            // its entire remaining hook chain before HeadPlugin touches metadata.
+            if (!context || context.controller.signal.aborted || visit !== swup.visit) {
+                abortObsoleteVisit(visit);
+                return;
+            }
+            const next = visit.to.document;
+            if (!next) return;
+            context.executeScripts = prepareNavigationScripts(next, { baseUrl: context.to.href });
+            await prepareNavigationFont(next, context.controller.signal);
+            if (context.controller.signal.aborted || visit !== swup.visit) {
+                abortObsoleteVisit(visit);
+                return;
+            }
+            const incoming = [...next.head.querySelectorAll("style,link[rel=stylesheet]")];
+            context.obsoleteStyles = authoredStyles.filter(
+                (el) => !incoming.some((other) => el.isEqualNode(other)),
+            );
+            dispatchNavigation("astro:after-preparation", context, next);
+        },
+        { priority: -100 },
+    );
+
+    // Assets are ready before old interactions are disposed. Replacement errors
+    // propagate to Swup's full-document fallback instead of leaving a dead page.
+    swup.hooks.replace("content:replace", async (visit, args, replace) => {
+        const context = contexts.get(visit);
+        // Swup can release an obsolete visit's parsed document while its async
+        // hook chain is still unwinding. Cancellation precedes validation: a
+        // missing document on an aborted visit is not a failed navigation.
+        if (context?.controller.signal.aborted || visit.done || visit !== swup.visit) return;
+        const next = visit.to.document;
+        if (!context || !next || !replace) throw new Error("Missing Swup document");
+        if (context.controller.signal.aborted) return;
+        const html = document.documentElement;
+        html.dataset.staluxVtFrom = getRouteKind(context.from.pathname);
+        html.dataset.staluxVtTo = getRouteKind(context.to.pathname);
+        html.dataset.staluxVtDirection = context.direction;
+        html.dataset.staluxVtPreset = context.preset;
+        context.motion = prepareRouteMotion(dispatchNavigation("astro:before-swap", context, next));
+        if (context.controller.signal.aborted) return;
+        await replace(visit, args);
+        if (context.controller.signal.aborted) return;
+        for (const element of context.obsoleteStyles) element.remove();
+        const incomingStyles = [...next.head.querySelectorAll("style,link[rel=stylesheet]")];
+        authoredStyles = [...document.head.querySelectorAll("style,link[rel=stylesheet]")].filter(
+            (el) => incomingStyles.some((other) => el.isEqualNode(other)),
+        );
+        // Main alone is replaced: header/footer/sentinel and background layers
+        // keep their node identities. Never reset live background state to SSR 0.
+        for (const { name, value } of [...next.body.attributes]) {
+            if (
+                name.startsWith("data-stalux-") &&
+                name !== "data-stalux-bg-index" &&
+                name !== "data-stalux-bg-layer"
+            )
+                document.body.setAttribute(name, value);
+        }
+        html.dataset.staluxRoute = getRouteKind(context.to.pathname);
+        visibleHistoryIndex = Number(window.history.state?.index ?? visibleHistoryIndex);
+        dispatchNavigation("astro:after-swap", context, next);
+        context.scriptsReady = context.executeScripts?.(context.controller.signal);
+    });
+
+    swup.hooks.replace(
+        "content:scroll",
+        async (visit, args, defaultScroll) => {
+            const saved = visit.history.popstate
+                ? historyPositions.get(Number(window.history.state?.index))
+                : undefined;
+            if (visit.history.popstate) {
+                // ScrollPlugin defers unanimated popstate to the browser, but Swup
+                // uses manual restoration even for reduced motion and native swipes.
+                const position = saved ??
+                    scroll.getCachedScrollPositions(visit.to.url)?.window ?? { top: 0, left: 0 };
+                window.scrollTo({ top: position.top, left: position.left, behavior: "instant" });
+                scroll.restoreScrollContainers(visit.to.url);
+                if (saved?.focus) {
+                    const link = [...document.querySelectorAll<HTMLAnchorElement>("a[href]")].find(
+                        (el) => el.getAttribute("href") === saved.focus,
+                    );
+                    link?.focus({ preventScroll: true });
+                }
+                startMotion(visit);
+                return true;
+            }
+            await defaultScroll?.(visit, args);
+            // ScrollPlugin scrolls in rAF; finish it before heading visibility checks.
+            await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
+            startMotion(visit);
+            return true;
+        },
+        { priority: 10 },
+    );
+
+    function startMotion(visit: Visit): void {
+        const context = contexts.get(visit);
+        context?.motion?.start(document.querySelector<HTMLElement>("[data-stalux-motion-focus]"), {
+            preset: context.preset,
+            skip: !visit.animation.animate || context.controller.signal.aborted,
+            browserMotion: context.browserMotion,
+        });
+    }
+
+    swup.hooks.on("page:view", async (visit) => {
+        const context = contexts.get(visit);
+        if (!context || context.controller.signal.aborted) return;
+        await context.scriptsReady;
+        if (context.controller.signal.aborted) return;
+        dispatchNavigation("astro:page-load", context);
+        if (!visit.animation.animate) context.motion?.start(null, { skip: true });
+    });
+    swup.hooks.replace("link:self", () => undefined);
+
+    const cancel = (visit: Visit) => {
+        const context = contexts.get(visit);
+        context?.controller.abort();
+        context?.motion?.cancel();
+        if (context === activeContext) {
+            clearMotionState();
+            document.documentElement.removeAttribute("aria-busy");
+            activeContext = undefined;
+        }
+    };
+    swup.hooks.on("visit:abort", cancel);
+    swup.hooks.on("visit:fail", cancel);
+    swup.hooks.on("visit:end", (visit) => {
+        const context = contexts.get(visit);
+        context?.motion?.start(null, { skip: true });
+        if (activeContext === context) {
+            clearMotionState();
+            activeContext = undefined;
+        }
+    });
+    swup.hooks.on("cache:set", () => {
+        while (swup.cache.size > 32)
+            swup.cache.delete(swup.cache.all.keys().next().value as string);
+    });
+    // Parsed DOM, not window.load: slow third-party resources cannot hold the
+    // first page's interactions hostage. Page-runtime dedupes the early mount.
+    const initialLoad = () => document.dispatchEvent(new Event("astro:page-load"));
+    if (document.readyState === "loading")
+        document.addEventListener("DOMContentLoaded", initialLoad, { once: true });
+    else queueMicrotask(initialLoad);
+    return swup;
+}

package/src/scripts/tags-cloud.ts

@@ -1,5 +1,5 @@
-import { navigate } from "astro:transitions/client";
 import { createClientLogger } from "./logger";
+import { navigate } from "./navigation-client";
 
 import { registerPageLifecycle } from "./page-runtime";
 

package/src/scripts/view-transitions.ts

@@ -1,234 +1,4 @@
-import { getRouteKind } from "@utils/public-routes";
-import { getRouteMotionPreset, type RouteMotionPreset } from "@utils/route-motion-policy";
-import { installBackToTop } from "./back-to-top";
-import { createClientLogger } from "./logger";
-import { prepareNavigationFont } from "./navigation-font";
-import { prepareRouteMotion, type RouteMotion } from "./route-motion";
+// Keep the layout entry stable while Swup owns navigation and animation.
+import { installSwupRouter } from "./swup-router";
 
-const logger = createClientLogger("view-transitions");
-
-interface TransitionWindow extends Window {
-    __STALUX_VT_LISTENER__?: boolean;
-}
-
-function setRouteState(pathname: string): void {
-    const html = document.documentElement;
-    const route = getRouteKind(pathname);
-    logger.debug(`route state=${route}`);
-    if (html.dataset.staluxRoute !== route) html.dataset.staluxRoute = route;
-    const main = document.querySelector("main[data-stalux-route]");
-    if (main && main.getAttribute("data-stalux-route") !== route) {
-        main.setAttribute("data-stalux-route", route);
-    }
-}
-
-interface NavigationEvent {
-    from: URL;
-    to: URL;
-    direction: string;
-    navigationType?: string;
-    loader: () => Promise<void>;
-    newDocument: Document;
-    signal: AbortSignal;
-    viewTransition?: ViewTransition;
-    sourceElement?: Element;
-}
-
-function setNavigationState(
-    event: NavigationEvent,
-    preset: RouteMotionPreset,
-    html = document.documentElement,
-): void {
-    const from = getRouteKind(new URL(event.from, window.location.href).pathname);
-    const to = getRouteKind(new URL(event.to, window.location.href).pathname);
-    html.dataset.staluxVtFrom = from;
-    html.dataset.staluxVtTo = to;
-    html.dataset.staluxVtDirection = event.direction;
-    html.dataset.staluxVtPreset = preset;
-}
-
-function clearNavigationState(): void {
-    const html = document.documentElement;
-    delete html.dataset.staluxVtFrom;
-    delete html.dataset.staluxVtTo;
-    delete html.dataset.staluxVtDirection;
-    delete html.dataset.staluxVtPreset;
-    delete html.dataset.staluxVtPhase;
-}
-
-function preserveHeaderMetrics(nextDocument: Document): void {
-    const selector = '[data-astro-transition-persist="stalux-site-header"]';
-    if (!document.querySelector(selector) || !nextDocument.querySelector(selector)) return;
-    // The header DOM persists. Keep its measured dimensions through Astro's root
-    // attribute swap instead of invalidating inherited layout variables twice.
-    for (const property of ["--stalux-nav-offset", "--stalux-site-header-height"]) {
-        const value = document.documentElement.style.getPropertyValue(property);
-        if (value && !nextDocument.documentElement.style.getPropertyValue(property)) {
-            nextDocument.documentElement.style.setProperty(property, value);
-        }
-    }
-}
-
-const transitionWindow = window as TransitionWindow;
-if (!transitionWindow.__STALUX_VT_LISTENER__) {
-    transitionWindow.__STALUX_VT_LISTENER__ = true;
-    let pendingNavigation = 0;
-    let swappedNavigation = 0;
-
-    // A current-page link is not a page replacement. Intercept before Astro's
-    // delegated handler, but keep propagation for menu cleanup and click tracking.
-    // During preparation, Astro must receive it to cancel an incoming route.
-    // Hash changes, explicit reloads, downloads and modified/new-tab clicks keep
-    // their native behavior.
-    document.addEventListener(
-        "click",
-        (event) => {
-            if (
-                pendingNavigation !== 0 ||
-                event.defaultPrevented ||
-                event.button !== 0 ||
-                event.metaKey ||
-                event.ctrlKey ||
-                event.shiftKey ||
-                event.altKey
-            )
-                return;
-            const anchor =
-                event.target instanceof Element
-                    ? event.target.closest<HTMLAnchorElement>("a[href]")
-                    : null;
-            if (
-                !anchor ||
-                anchor.href !== window.location.href ||
-                anchor.href.includes("#") ||
-                anchor.hasAttribute("download") ||
-                anchor.hasAttribute("data-astro-reload") ||
-                anchor.relList.contains("external")
-            )
-                return;
-            const target =
-                anchor.getAttribute("target") ??
-                document.querySelector("base[target]")?.getAttribute("target");
-            if (!target || target === "_self") event.preventDefault();
-        },
-        { capture: true },
-    );
-
-    let generation = 0;
-    let pendingBrowserMotion = false;
-    let preset: RouteMotionPreset = "none";
-    let motion: RouteMotion | undefined;
-    window.addEventListener(
-        "popstate",
-        (event) => {
-            pendingBrowserMotion =
-                (event as PopStateEvent & { hasUAVisualTransition?: boolean })
-                    .hasUAVisualTransition === true;
-        },
-        { capture: true },
-    );
-    document.addEventListener("astro:before-preparation", (event) => {
-        const navigation = event as unknown as NavigationEvent;
-        const current = ++generation;
-        pendingNavigation = current;
-        const cancelPreparation = () => {
-            if (current !== generation) return;
-            pendingNavigation = 0;
-            clearNavigationState();
-        };
-        motion?.cancel();
-        clearNavigationState();
-        // CSS moves only explicitly marked content, never the root or sidebars.
-        // Long article geometry does not need to be measured or captured.
-        preset = getRouteMotionPreset({
-            from: new URL(navigation.from, window.location.href),
-            to: new URL(navigation.to, window.location.href),
-            navigationType: navigation.navigationType,
-            intent:
-                navigation.sourceElement
-                    ?.closest("[data-stalux-motion]")
-                    ?.getAttribute("data-stalux-motion") ?? undefined,
-            reducedMotion: window.matchMedia?.("(prefers-reduced-motion: reduce)").matches,
-            browserMotion: pendingBrowserMotion && navigation.navigationType === "traverse",
-            hidden: document.hidden,
-        });
-        pendingBrowserMotion = false;
-        setNavigationState(navigation, preset);
-        navigation.signal.addEventListener("abort", cancelPreparation, { once: true });
-        if (navigation.signal.aborted) cancelPreparation();
-        queueMicrotask(() => {
-            if (event.defaultPrevented) cancelPreparation();
-        });
-        const loader = navigation.loader;
-        navigation.loader = async () => {
-            try {
-                await loader();
-                if (event.defaultPrevented) cancelPreparation();
-                else {
-                    await prepareNavigationFont(navigation.newDocument, navigation.signal);
-                }
-            } catch (error) {
-                cancelPreparation();
-                throw error;
-            }
-        };
-    });
-
-    document.addEventListener("astro:before-swap", (event) => {
-        const navigation = event as unknown as NavigationEvent;
-        if (navigation.signal.aborted) return;
-        const current = generation;
-        swappedNavigation = current;
-        preserveHeaderMetrics(navigation.newDocument);
-        // Astro replaces the root attributes during swap. Carry state into the
-        // new document; CSS keyframes read these data-* attributes to pick their
-        // own direction rather than letting Astro's default `fade` pair apply.
-        setNavigationState(navigation, preset, navigation.newDocument.documentElement);
-        if (preset !== "none") {
-            navigation.newDocument.documentElement.dataset.staluxVtPhase = "prepared";
-        }
-        // This release uses CSS/native VT only. Settle the existing installation
-        // gate without starting a second WAAPI effect; analytics/background keep
-        // the same shared ready/finished semantics and their existing listeners.
-        motion = prepareRouteMotion(navigation);
-        motion.start(null, { skip: true });
-        // Preparing the incoming content paused prevents a one-frame flash at
-        // its final position. Release it with the heading's native animation;
-        // page scripts and Astro's scroll restoration keep their normal order.
-        void Promise.resolve(navigation.viewTransition?.ready).then(
-            () => {
-                if (
-                    current === generation &&
-                    !navigation.signal.aborted &&
-                    document.documentElement.dataset.staluxVtPhase === "prepared"
-                ) {
-                    document.documentElement.dataset.staluxVtPhase = "running";
-                }
-            },
-            () => {},
-        );
-        const finish = () => {
-            if (current === generation) clearNavigationState();
-        };
-        // Native ready starts the animation. Keep selectors until it finishes,
-        // including fallback/skip and abort; an older navigation cannot clear a
-        // newer one's state.
-        void motion.finished.then(finish, finish);
-    });
-
-    document.addEventListener("astro:after-swap", () => {
-        setRouteState(window.location.pathname);
-    });
-
-    document.addEventListener("astro:page-load", () => {
-        // A previous route's scripts can finish while a newer loader is pending.
-        if (swappedNavigation === generation) pendingNavigation = 0;
-        setRouteState(window.location.pathname);
-    });
-
-    // Footer button and scroll sentinel persist across soft navigations, so the
-    // BackToTop observer is installed once per document.
-    installBackToTop();
-}
-
-setRouteState(window.location.pathname);
+installSwupRouter();

package/src/scripts/word-list.ts

@@ -7,8 +7,14 @@ function scrollToWord(hash: string): void {
         highlighted.removeAttribute("data-glow");
     }
     element.dataset.glow = "";
-    element.scrollIntoView({ behavior: "smooth", block: "center" });
-    history.replaceState(null, "", hash);
+    const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    element.scrollIntoView({ behavior: reducedMotion ? "instant" : "smooth", block: "center" });
+    // Keep Swup's source/index so back from another page can restore this entry.
+    history.replaceState(
+        { ...history.state, url: `${location.pathname}${location.search}${hash}` },
+        "",
+        hash,
+    );
 }
 
 registerPageLifecycle("word-list", () => {
@@ -17,7 +23,7 @@ registerPageLifecycle("word-list", () => {
     let firstFrame = 0;
     let secondFrame = 0;
 
-    if (location.hash.startsWith("#word-")) {
+    if (location.hash.startsWith("#word-") && !window.swup?.visit.history.popstate) {
         firstFrame = requestAnimationFrame(() => {
             firstFrame = 0;
             secondFrame = requestAnimationFrame(() => {