Fix <video muted> losing its muted state after ClientRouter navigation in Chrome

.changeset/wet-times-doubt.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fixes `<video muted>` losing its muted state after a ClientRouter navigation in Chrome

packages/astro/e2e/fixtures/view-transitions/src/pages/one.astro

@@ -24,6 +24,7 @@ import Layout from '../components/Layout.astro';
 		</template>
 	</custom-a>
 	<a id="click-declarative-shadow-dom" href="/declarative-shadow-dom">go to declarative shadow DOM example</a>
+	<a id="click-video-muted" href="/video-muted">go to muted video</a>
 
 	<div id="test">test content</div>
 

packages/astro/e2e/fixtures/view-transitions/src/pages/video-muted.astro

@@ -0,0 +1,8 @@
+---
+import Layout from '../components/Layout.astro';
+---
+<Layout>
+	<p id="video-muted">Muted video page</p>
+	<a id="click-home" href="/one">go home</a>
+	<video id="muted-vid" muted playsinline></video>
+</Layout>

packages/astro/e2e/view-transitions.test.ts

@@ -615,6 +615,21 @@ test.describe('View Transitions', () => {
 		await expect(page.locator('#nested-placeholder')).toHaveCount(0);
 	});
 
+	test('reified <video muted> preserves the muted IDL property after navigation', async ({
+		page,
+		astro,
+	}) => {
+		// Regression for #18152: reifyMediaElements() copies the muted content attribute
+		// via setAttribute(), but Chrome does not sync it to video.muted on script-created
+		// elements. The fix explicitly sets the property after cloning attributes.
+		await page.goto(astro.resolveUrl('/one'));
+		await page.click('#click-video-muted');
+		const vid = page.locator('#muted-vid');
+		await expect(vid).toBeVisible();
+		const muted = await vid.evaluate((el) => (el as HTMLVideoElement).muted);
+		expect(muted).toBe(true);
+	});
+
 	test('React Islands can persist using transition:persist', async ({ page, astro }) => {
 		// Go to page 1
 		await page.goto(astro.resolveUrl('/island-one'));

packages/astro/src/transitions/swap-functions.ts

@@ -230,6 +230,10 @@ function reifyMediaElements(root: Element, liveMedia: ReadonlySet<Element>) {
 			fresh.setAttribute(attr.name, attr.value);
 		}
 		fresh.innerHTML = media.innerHTML;
+		// Chrome only syncs the muted IDL property from the content attribute when the
+		// HTML parser creates the element; setAttribute('muted', ...) on a script-created
+		// element leaves video.muted === false. https://github.com/withastro/astro/issues/18152
+		if (fresh.hasAttribute('muted')) (fresh as HTMLMediaElement).muted = true;
 		media.replaceWith(fresh);
 	}
 }