last fade attempt

src/routes/+layout.svelte

@@ -53,7 +53,7 @@
 				return;
 			}
 
-			if (canStartViewTransition()) {
+			if (canStartViewTransition() && !onMapsPage()) {
 				// one cross-fade of the whole document; component transitions untouched
 				void startViewTransition(paint);
 				return;
@@ -103,6 +103,14 @@
 	// own way out rather than sitting on top of an error message forever.
 	const OVERLAY_CEILING_MS = 15000;
 
+	// The map is a cross-origin iframe, and a browser does not paint one into a
+	// view transition snapshot. Any transition with the maps page on either side
+	// animates a hole where the map is: leaving it, the map drops out at frame one
+	// and that blank sits under the incoming page for the whole run. Swapping
+	// outright is the honest answer - there is nothing here to cross-fade.
+	const MAPS_ROUTE = '/weather/maps';
+	const onMapsPage = () => routePath(get(page).url.pathname).startsWith(MAPS_ROUTE);
+
 	let loadingOverlay = $state(false);
 	let overlayCeilingTimer = 0;
 	// A view transition freezes the page, so a Svelte in-transition started under
@@ -209,7 +217,9 @@
 		// `startViewTransition` decides whether a transition is possible at all
 		// (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 = canStartViewTransition();
+		const touchesMap =
+			navigation.from?.route?.id === MAPS_ROUTE || navigation.to?.route?.id === MAPS_ROUTE;
+		const underTransition = canStartViewTransition() && !touchesMap;
 
 		return new Promise<void>((swap) => {
 			void startViewTransition(
@@ -224,7 +234,7 @@
 					if (pending) await waitForContent(underTransition);
 				},
 				// pins the chrome that is the same on both sides (routes/layout.css)
-				{ rootClass: 'page-switch' }
+				{ rootClass: 'page-switch', enabled: underTransition }
 			);
 		});
 	});