From 7ba0995bf8079825dc860862494d1a972a5123e6 Mon Sep 17 00:00:00 2001
From: Alexander Bocken <alexander@bocken.org>
Date: Wed, 18 Feb 2026 20:37:13 +0100
Subject: [PATCH] recipes: hide image-wrap background color during view
 transition morph

---
 src/routes/[recipeLang=recipeLang]/+layout.svelte | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/routes/[recipeLang=recipeLang]/+layout.svelte b/src/routes/[recipeLang=recipeLang]/+layout.svelte
index a6a89d4..965390d 100644
--- a/src/routes/[recipeLang=recipeLang]/+layout.svelte
+++ b/src/routes/[recipeLang=recipeLang]/+layout.svelte
@@ -21,16 +21,25 @@ onNavigate((navigation) => {
 	}
 
 	return new Promise((resolve) => {
-		document.startViewTransition(async () => {
+		const vt = document.startViewTransition(async () => {
 			resolve();
 			await navigation.complete;
 
+			// Hide .image-wrap background so the color box doesn't show behind the morphing image
+			const wrap = document.querySelector('.image-wrap');
+			if (wrap) wrap.style.backgroundColor = 'transparent';
+
 			// Set view-transition-name on the matching CompactCard/hero image for reverse morph
 			if (fromRecipe) {
 				const card = document.querySelector(`img[data-recipe="${fromRecipe}"]`);
 				if (card) card.style.viewTransitionName = `recipe-${fromRecipe}-img`;
 			}
 		});
+		// Restore background color once transition finishes
+		vt.finished.then(() => {
+			const wrap = document.querySelector('.image-wrap');
+			if (wrap) wrap.style.backgroundColor = '';
+		});
 	});
 });
 import UserHeader from '$lib/components/UserHeader.svelte';