Commit fa77fa63d in Astro 3.0.13 breaks page after a view transitions with dev server

[dallyh]

Astro Info

Astro                    v3.1.1
Node                     v18.17.1
System                   Windows (x64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             @astrojs/react
                         astro-i18n-integration
                         @astrojs/sitemap
                         @astrojs/prefetch

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

No response

Describe the Bug

I've just updated packages for my project, which I currently mainly use to experiement with Astro 3. After upgrading to 3.1.1 I've noticed that navigation while using ViewTransitions in SPA mode with a dev server is currently broken - navigation to a page does not load styles properly, or the page is shifted down (like it was scrolled).

I have a repository here: https://github.com/dallyh/website-concept/. To reproduce the issue, just clone the before-upgrade and broken-nav-transition repos. Install packages for branch before-upgrade, and run the dev server. Switch to English language (in the footer, or navigate to http://localhost:4321/website-concept/en/ - this is not mandatory for the bug to occur), then click the "Contact" or "Resume" card - everything works as expected.

Do the same for branch broken-nav-transition, which uses newest Astro, and suddenly both pages are rendered incorrectly. If you then refresh the page manually, everything is fine.

For the page "Resume" the whole page is moved down and the scrollbar is at the top most position.

For the page "Contact" some of the styles are not loaded (or it seems like it).

Broken styling:

Expected result:

I cannot provide a different example, as I don't really know what triggers this. I have tracked down the problematic commit, which is: fa77fa6. After a revert, everything works smoothly.

I should also mention, that this only happens on a dev server, after the page gets build, everything is fine. I've noticed that the commit only changes things while in dev mode, so that is maybe why.

What's the expected result?

Styles work, page starts from top.

Link to Minimal Reproducible Example

https://github.com/dallyh/website-concept/tree/broken-nav-transition

Participation

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

[matthewp]

Hi @dallyh sorry about that. Would love to fix this. Could you create a reproduction to help? Using this template would work: https://astro.new/minimal?on=stackblitz

[dallyh]

Hi @dallyh sorry about that. Would love to fix this. Could you create a reproduction to help? Using this template would work: https://astro.new/minimal?on=stackblitz

Hello @matthewp. I tried to but I cannot reproduce it elsewhere than on my repo:

• Working branch: https://github.com/dallyh/website-concept/tree/before-upgrade
• Broken branch: https://github.com/dallyh/website-concept/tree/broken-nav-transition

There are instructions in the issue description. If you can not verify it there, then I'll try again to create a minimal reproduction.

[dallyh]

Just tried it with 3.1.2 and the behavior is still the same.

[matthewp]

@dallyh can you try 3.1.4? Recent fix might have affected this.

[dallyh]

@matthewp The issue is still present. I have stripped down the branch: https://github.com/dallyh/website-concept/tree/broken-nav-transition on my repo, so now it is the minimum required reproducible example. There are only 2 pages. When you run a dev server, there is a card on the page which is a link. The link navigates to another page, where the styles are a little bit broken. After a refresh (F5) the styles are OK.

Click this:

Then after a view transition this happens:

Refresh (or navigation straight to this page, without a transition through a direct link):

Edit:

If you change the Astro version to 3.0.12, everything still works as expected.