<ViewTransitions /> Renders the contents of <noscript> tags after initial navigation

[Xetera]

What version of astro are you using?

2.10.1

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

npm

What operating system are you using?

Linux, MacOS

What browser are you using?

Chrome, Edge, Firefox, Safari

Describe the Bug

When using <ViewTransitions /> with no additional configuration, the initial page transition triggers the <noscript> contents to be displayed as if javascript is disabled. This behavior is consistent no matter what part of the page the view transitions or the <noscript> elements are placed in the shared layout.

I've done some investigation and the problem seems to be happening after the body is replaced with the response from the server:

astro/packages/astro/components/ViewTransitions.astro

Lines 119 to 125 in 9ad0d32

	// Everything left in the new head is new, append it all.
	document.head.append(...doc.head.children);
	// Move over persist stuff in the body
	const oldBody = document.body;
	document.body.replaceWith(doc.body);
	for (const el of oldBody.querySelectorAll(`[${PERSIST_ATTR}]`)) {

On the line before where the head is replaced, the <noscript> rules don't apply to the page being navigated away from, but when the body is replaced with the new page's response. They magically jump out.

I thought this could be a chromium bug with view transitions since it almost feels impossible for astro to be responsible for what happening without accidentally pulling out <noscript> children out and rendering it directly. But this happens on Firefox and Safari with fallback rules too since the cause of the problem isn't related to view transitions at all.

What's the expected result?

Contents of noscript tags should not be rendered with javascript enabled

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-uxtpsm?file=src%2Fcomponents%2Flayout.astro

Participation

• I am willing to submit a pull request for this issue.

[martrapp]

@Xetera as a quick fix you might try adding data-astro-transition-persist="someId" to the noscript tag

[natemoo-re]

Interesting! I'm assuming noscript is only handled by browsers during the initial parse of the document, so when we inject it, noscript is treated as a regular element?

If you're looking to help with a PR, I'd suggest updating our script to remove noscript elements before the incoming page is merged with the current page.

[matthewp]

This is due to using DOMParser which apparently parses noscript children as markup. See https://developer.mozilla.org/en-US/docs/Web/API/DOMParser/parseFromString

Thinking about what can be done about this...

[matthewp]

Using transition:persist is indeed a reasonable workaround. Still digging into it.

[martrapp]

Since the client definitely has javascript enabled while we manipulate the DOM ;-), I too find Nate's suggestion to simply delete all noscript nodes in the parsed tree to be apt.

[matthewp]

@martrapp you want to give that a try? I had played around with it myself but I didn't think it was working how I expected.