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 }
 			);
 		});
 	});

src/routes/layout.css

@@ -197,56 +197,63 @@
 	}
 
 	/* ── Cross-fades that do not dip ──────────────────────────────────────────
-	   The default cross-fade is NOT opacity-neutral: both snapshots are opaque
-	   and the browser fades one out while fading the other in, so at the
-	   midpoint the pair covers only ~75% of the region and the page background
-	   shows through both. That dip is the flash - over the whole viewport for a
-	   page swap, and over the table, summary and charts (which between them are
-	   the whole content column) for a day switch.
+	   The default cross-fade is NOT opacity-neutral: coverage of two stacked
+	   layers is `new + old * (1 - new)`, so at the midpoint the pair covers only
+	   ~75% of the region and the page background shows through both. That dip is
+	   the flash - over the whole viewport for a page swap, and over the table,
+	   summary and charts (between them the whole content column) for a day
+	   switch.
 
-	   The only opacity-neutral pairing with normal blending is to hold the
-	   outgoing snapshot at full opacity and fade the incoming one in on top of
-	   it - it is painted above - so every frame stays fully covered. */
+	   Two ways out, and which one applies depends on whether the *incoming*
+	   snapshot is opaque. Holding the outgoing one at full opacity fixes the
+	   coverage arithmetic, but a translucent incoming snapshot then reads
+	   straight through it and the old content lingers as a ghost. */
+
+	/* The document background is opaque, so the whole-viewport swap can simply
+	   hold the outgoing snapshot until the pseudo elements are torn down. */
 	@keyframes vt-fade-in {
 		from {
 			opacity: 0;
 		}
 	}
-
-	::view-transition-old(root),
-	::view-transition-old(day-table),
-	::view-transition-old(day-summary),
-	::view-transition-old(day-charts) {
+	::view-transition-old(root) {
 		animation: none;
 		opacity: 1;
 	}
 	::view-transition-new(root) {
 		animation: vt-fade-in 400ms ease;
 	}
+
+	/* The day regions are not opaque - they are cards with gaps and headings
+	   between them - so they keep a real cross-fade and fix the dip the other
+	   way: `plus-lighter` makes the two halves sum to exactly the original
+	   wherever they agree, which is most of the region (the card backgrounds are
+	   the same on both days; only the readings differ). */
+	::view-transition-old(day-table),
 	::view-transition-new(day-table),
+	::view-transition-old(day-summary),
 	::view-transition-new(day-summary),
+	::view-transition-old(day-charts),
 	::view-transition-new(day-charts) {
-		animation: vt-fade-in 420ms ease;
+		animation-duration: 420ms;
+		animation-timing-function: ease;
+		mix-blend-mode: plus-lighter;
 	}
 
-	/* The outgoing snapshot no longer fades, so a region that gets *shorter*
-	   would keep showing its old tail below the new content for the whole
-	   transition. Clipping to the group - which animates between the two sizes -
-	   turns that into the shrink it actually is. */
-	::view-transition-group(day-table),
-	::view-transition-group(day-summary),
-	::view-transition-group(day-charts) {
-		overflow: clip;
-	}
-
-	/* Chrome that is identical on both sides of the swap: pinned, never faded.
-	   (Whole-document theme changes are a `root` transition with no page-switch
-	   class, so they still cross-fade the chrome along with everything else.) */
+	/* Chrome captured only so the fading regions cannot paint over it. The strip
+	   does change - the selected day moves - but that change belongs to the
+	   regions' cross-fade, not to the strip, so it swaps outright: the outgoing
+	   snapshot is dropped rather than held, because the selected cell is a
+	   translucent `bg-primary/10` tint and anything left underneath shows
+	   through it as a second, doubled label. */
 	::view-transition-old(topbar),
-	::view-transition-new(topbar),
 	::view-transition-old(sidebar),
+	::view-transition-old(daystrip) {
+		animation: none;
+		opacity: 0;
+	}
+	::view-transition-new(topbar),
 	::view-transition-new(sidebar),
-	::view-transition-old(daystrip),
 	::view-transition-new(daystrip) {
 		animation: none;
 		opacity: 1;

src/routes/weather/14-day/[location]/+page.svelte

@@ -98,7 +98,7 @@
 	$effect(() => {
 		const model = params.models?.[0];
 		if (!mounted || !model) return;
-		syncSearchParams(get(page).url, { model: unlessDefault(model, DEFAULT_MODEL) });
+		syncSearchParams({ model: unlessDefault(model, DEFAULT_MODEL) });
 	});
 
 	// components persist across refetches; entries are null while unmounted

src/routes/weather/compare/[location]/+page.svelte

@@ -134,7 +134,7 @@
 		const models = params.models;
 		const vars = params.hourly;
 		if (!mounted) return;
-		syncSearchParams(get(page).url, {
+		syncSearchParams({
 			models: listUnlessDefault(models, DEFAULT_MODELS),
 			vars: listUnlessDefault(vars, DEFAULT_VARS)
 		});

src/routes/weather/week/[location]/+page.svelte

@@ -273,7 +273,7 @@
 		const isToday = fetchedDaily
 			? dayKey === formatZoned(new Date(), fetchedDaily.timezone, 'yyyy-MM-dd')
 			: false;
-		syncSearchParams(get(page).url, {
+		syncSearchParams({
 			day: isToday ? null : dayKey,
 			model: unlessDefault(model, 'best_match')
 		});