flashing fixed

src/routes/layout.css

@@ -159,25 +159,27 @@
 		z-index: 20;
 	}
 
-	/* Same for the topbar: a captured region's snapshot is painted at its layout
-	   position, including the part normally scrolled up behind the chrome. */
-	:root.day-switch .topbar {
+	/* Same for the topbar and the sidebar: a captured region's snapshot is
+	   painted at its layout position, including the part normally scrolled up
+	   behind the chrome. Both are also identical either side of a *page* swap,
+	   so they are captured there too and pinned below - a region that does not
+	   change should not be animated at all. */
+	:root.day-switch .topbar,
+	:root.page-switch .topbar {
 		view-transition-name: topbar;
 	}
 	::view-transition-group(topbar) {
 		z-index: 30;
 	}
-
-	::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-duration: 420ms;
-		animation-timing-function: ease;
+	:root.page-switch .sidebar-region {
+		view-transition-name: sidebar;
+	}
+	::view-transition-group(sidebar) {
+		z-index: 25;
 	}
 
+	/* The root fade is the page swap's own; during a day switch the chrome must
+	   not so much as flicker, so it is cancelled outright. */
 	:root.day-switch::view-transition-old(root),
 	:root.day-switch::view-transition-new(root) {
 		animation: none;
@@ -188,35 +190,66 @@
 		.day-region-summary,
 		.day-region-charts,
 		.daystrip,
-		.topbar {
+		.topbar,
+		.sidebar-region {
 			view-transition-name: none;
 		}
 	}
 
-	/* Whole-document cross-fade, for both a page swap and a theme change (see
-	   routes/+layout.svelte). Doing the theme as a view transition instead of a
-	   blanket `* { transition }` matters: that blanket rule also stretched every
-	   component's own hover and focus transitions to 400ms for the duration of
-	   the switch, which read as lag on interactive controls.
+	/* ── 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. Both snapshots are opaque
-	   and the browser fades one out while fading the other in, so halfway
-	   through, the two together cover only ~75% of the screen and the page
-	   background shows through everything: the whole screen visibly dips, which
-	   reads as a flash. Holding the outgoing snapshot at full opacity and fading
-	   only the incoming one in on top of it (it is painted above) keeps every
-	   frame fully covered. */
-	::view-transition-old(root) {
+	   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. */
+	@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) {
 		animation: none;
 		opacity: 1;
 	}
 	::view-transition-new(root) {
-		animation: root-fade-in 400ms ease;
+		animation: vt-fade-in 400ms ease;
 	}
-	@keyframes root-fade-in {
-		from {
-			opacity: 0;
-		}
+	::view-transition-new(day-table),
+	::view-transition-new(day-summary),
+	::view-transition-new(day-charts) {
+		animation: vt-fade-in 420ms ease;
+	}
+
+	/* 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.) */
+	::view-transition-old(topbar),
+	::view-transition-new(topbar),
+	::view-transition-old(sidebar),
+	::view-transition-new(sidebar),
+	::view-transition-old(daystrip),
+	::view-transition-new(daystrip) {
+		animation: none;
+		opacity: 1;
 	}
 
 	/* Fallback for browsers without view transitions: fade the colours only. */