flashing fixed

src/routes/+layout.svelte

@@ -14,8 +14,7 @@
 	import { storedTheme } from '$lib/stores/settings';
 
 	import {
-		isViewTransitionActive,
-		prefersReducedMotion,
+		canStartViewTransition,
 		startViewTransition,
 		supportsViewTransitions
 	} from '$lib/utils/view-transition';
@@ -54,7 +53,7 @@
 				return;
 			}
 
-			if (supportsViewTransitions() && !isViewTransitionActive()) {
+			if (canStartViewTransition()) {
 				// one cross-fade of the whole document; component transitions untouched
 				void startViewTransition(paint);
 				return;
@@ -206,22 +205,25 @@
 		else markPageReady();
 
 		// `startViewTransition` decides whether a transition is possible at all
-		// (support, reduced motion, one already on screen) and runs the update
+		// (support, reduced motion, one already capturing) and runs the update
 		// inline when it is not - so there is exactly one path from here down.
-		const underTransition =
-			supportsViewTransitions() && !prefersReducedMotion() && !isViewTransitionActive();
+		const underTransition = canStartViewTransition();
 
 		return new Promise<void>((swap) => {
-			void startViewTransition(async () => {
-				// hand control back so SvelteKit swaps the DOM underneath the
-				// frozen snapshot of the old page
-				swap();
-				// A superseded navigation (a redirect, or a fast second click)
-				// rejects this promise; that is not an error worth surfacing,
-				// and leaving it unhandled shows up as "navigation aborted".
-				await navigation.complete.catch(() => {});
-				if (pending) await waitForContent(underTransition);
-			});
+			void startViewTransition(
+				async () => {
+					// hand control back so SvelteKit swaps the DOM underneath the
+					// frozen snapshot of the old page
+					swap();
+					// A superseded navigation (a redirect, or a fast second click)
+					// rejects this promise; that is not an error worth surfacing,
+					// and leaving it unhandled shows up as "navigation aborted".
+					await navigation.complete.catch(() => {});
+					if (pending) await waitForContent(underTransition);
+				},
+				// pins the chrome that is the same on both sides (routes/layout.css)
+				{ rootClass: 'page-switch' }
+			);
 		});
 	});
 
@@ -315,7 +317,7 @@
 
 <div class="flex h-screen overflow-hidden bg-background text-foreground">
 	<!-- Desktop sidebar -->
-	<div class="hidden h-full shrink-0 md:block">
+	<div class="sidebar-region hidden h-full shrink-0 md:block">
 		<WeatherNav collapsed={sidebarCollapsed} onToggle={toggleSidebar} />
 	</div>