Navigation fails when using View Transitions and navigating to pages containing a client:only component

[evadecker]

Astro Info

Astro                    v3.4.3
Node                     v18.18.0
System                   Linux (x64)
Package Manager          unknown
Output                   static
Adapter                  none
Integrations             @astrojs/react

If this issue only occurs in one browser, which browser is a problem?

Safari

Describe the Bug

When using View Transitions and attempting to navigate to a page which contains a client:only component, Astro will occasionally fail to navigate to that page, or delay navigation for several seconds without feedback to the user.

Conditions:

• View Transitions are enabled.
• The new page contains a framework component set to client:only (I have only tested this using React components, unsure if it applies to other frameworks).

Observed behavior:

• Astro will not navigate to the new page. (Safari 17.0)
• Astro will wait several seconds before navigating. (Chrome 118.0.5993.117)
• Failing to navigate to the new page is most common on the dev server, and seems to occur less frequently when using astro preview or running in production. However, I have also encountered navigation failure on a production site in Safari.

client-load-fail.mov

What's the expected result?

• Astro will immediately navigate to the new page without delay.
• If there is an error which prevents Astro from navigating to the new page with View Transitions enabled, an error will display in the console.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-xvhpqg-pz2nzc?file=src%2Flayouts%2FLayout.astro

Participation

• I am willing to submit a pull request for this issue. (Or to help, at least!)

[lilnasy]

The error in browser console. Firefox is not affected.

[martrapp]

Hi @evadecker, I'm sorry that you are getting this error. In DEV mode, we have a pretty expensive handling for navigating to pages with client:only components. Basically, we restart the page in a clean state behind the scenes and wait until it is fully rendered to determine which stylesheets need to be copied from the current page to the new page. This may mean 1 or 2 seconds of overhead.

But it shouldn't lead to errors. I can reproduce the error on Stackblitz in Chrome. However, I have not been able to reproduce the above error outside of Stackblitz. Neither in a local development nor on github-codespaces. However, I don't have Safari either. Do you have a way to confirm that your minimal example triggers this error in another environment that I can reproduce?

Since the above srcdoc error can only occur in DEV, I'm afraid it's not the cause of the production issues you had.

[evadecker]

Thanks for the background explanation @martrapp! Is there any way for you to download Safari? That's the browser it happens most consistently in.

[evadecker]

Thanks so much for the fix @martrapp!