View Transitions - transition not coming through once deployed

[thomasledoux1]

What version of astro are you using?

2.10.1

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

Vercel

What package manager are you using?

npm

What operating system are you using?

Mac

What browser are you using?

Chrome 115.0.5790.114

Describe the Bug

When running my site in development mode, I can see the transitions on the titles of my blog posts working fine. When you click a preview of a blog post on the blog overview, the title should be transitioned to the title at the top of the blog detail page.
Once deployed, this does not seem to work though.
Not sure what's going wrong here.
Can be reproduced by going to /blog and clicking on 1 of the previews there.
Source code: https://github.com/thomasledoux1/website-thomas-astro/tree/feature/view-transitions
Deployed URL: https://website-thomas-astro-git-feature-view-transitions-thomasledoux1.vercel.app/blog

What's the expected result?

The transition to also work when deployed.

Link to Minimal Reproducible Example

https://github.com/thomasledoux1/website-thomas-astro/tree/feature/view-transitions

Participation

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

[matthewp]

Can you provide a minimal reproduction? Don't see how deployment could affect things. Does this happen locally with preview?

[thomasledoux1]

Hi @matthewp I think this should do:

• Github repo with minimal repro: https://github.com/thomasledoux1/github-1bim5r-x9eb3b
• Stackblitz: https://stackblitz.com/edit/github-1bim5r?file=astro.config.mjs

When running "vercel dev" on the project, I can seem to reproduce it, when running "npm run dev" (so "astro dev"), I can't.
When deploying to Vercel the problem is different than what I'm seeing on my website, but also has issues: https://github-1bim5r-x9eb3b.vercel.app/blog
The issue here is when you click a blog preview, you're navigated to the blog detail and you see the title being animated, but when you hit the back button of the browser, no animation is triggered.
Also noticed when you click back and forward buttons in the browser a few times, the page seems to get stuck in a phase between the overview and detail page, where you can see parts of each page flickering.

[matthewp]

@thomasledoux1 thanks, and just to reiterate, you don't see these issues in dev?

[thomasledoux1]

Seems to be working fine there. If you open the StackBlitz you can see it works as expected, when you open the Vercel link, it doesn't.

[matthewp]

Here's where the transitions are used: https://github.com/search?q=repo%3Athomasledoux1%2Fgithub-1bim5r-x9eb3b%20transition%3Aname&type=code

just a side note, the post.slug is good thing to use as transition name in this scenario. Not the reason for your bug though, i doubt.

[thomasledoux1]

Yes it is indeed. And good point, will take that into account!

[martrapp]

After navigating some pages on the vercel app, there are multiple instances of the event handler. Looks like copies of the script are loaded/executed multiple times. Chrome also shows strange source code positions for the handlers.

[matthewp]

@martrapp Ah, I was wondering why that weird double-loading thing was happening that a lot of people ran into. That explains it perfectly. We'll probably need to prevent re-execution of scripts, but I'll have to think about how to do so.

[matthewp]

PR is up: #8033

[thomasledoux1]

Hi @matthewp , I still seem to be encountering the problem where I don't see the transitions on specific elements once deployed. When using "npm run dev", all works fine, I see the image on my blog overview transition to the blog detail when clicking through. But once deployed (to both Netlify & Vercel), I don't see the transition on the images at all. I do see the transition between the pages though.
Not sure what's going wrong here...
Github repo can be found here (branch feature/vt). https://github.com/thomasledoux1/website-thomas-astro/tree/feature/vt
You can search for "transition-name" in the codebase, that should show you that the same name is used in 2 places, both places are using the Layout.astro (which contains the component.
Live URL Netlify: https://feature-vt-netlify--dashing-blancmange-5e7499.netlify.app/personal
Live URL Vercel: https://website-thomas-astro-git-feature-vt-thomasledoux1.vercel.app/

[satnaing]

@martrapp
I'm having the exact same problem. It's strange.
Everything works fine on dev but not when I build and try npm run preview.
You can check this branch on my repo.
Or you can try reproducing it with Astro's default blog template.

Here's my deployed site url.

[martrapp]

Hi @satnaing, the problem on the deployed site was a bug I introduced in 3.0.13 and fixed in 3.1.0.
I have just rebuilt your repo and it looks good to me. I apologize for any inconvenience this has caused. Could you please confirm that it works for you with 3.1.0?

[thomasledoux1]

@martrapp for me at least this didn't solve it. https://website-thomas-astro-git-feature-vt-thomasledoux1.vercel.app/blog is now running on 3.1.0 and no difference.

[martrapp]

@thomasledoux1 I can confirm that your problem is of a different nature. On your /blog page with the cards, the images do not have a view-transition-name, although you have set the transition:name correctly. It works with astro dev, but not with astro build. The problem is independent of the Vercel adapter, it also occurs in SSG without adapter. There are similarities to #8392, and we should wait for that solution and then revisit or even reopen this issue here again.

[satnaing]

@martrapp
I can confirm that it works as expected after upgrading to v3.1.0. Here's my deployed URL.
https://astro-paper.pages.dev/

Thanks!

[ref-thomasledoux1]

@martrapp I don't think it's linked to the Image component either, because I tried to switch it up to put the VT on the title of the blog instead, but that doesn't work either.

[thomasledoux1]

@martrapp @matthewp I upgraded to the latest version which contains the fix for #8392, but the issue persists for me.. Link above still valid, now contains latest version of Astro.
On https://website-thomas-astro-hf7v5aejd-thomasledoux1.vercel.app/blog you can see the

tags get a "data-astro-transition-scope", but the CSS on the page doesn't include a transition-name for that data attribute.

[matthewp]

@thomasledoux1 can you file a new issue?

[thomasledoux1]

@matthewp of course! #8675