Flickering in Astro Page Transitions with Custom Dialog View Transitions

[broken mural]

Hello, I'm experiencing a flickering issue when navigating between pages in my Astro project. This issue occurs specifically on pages that use a custom dialog component (DialogAnimation.astro) that implements its own morphing animations using the View Transitions API. Despite trying several solutions, the flickering persists.

When I navigate between pages (e.g., from /about to /services or vice versa), there's a noticeable flickering on the screen during the transition. This happens even if the dialog is closed when I start browsing. If the dialog is open, the behavior is even more erratic.

[wooden fog]

Do you have a light/dark mode system?

[broken mural]

On the website I am only using clear mode.

I'm wondering if it could be other animations that I have as transitions between images on another page.

[split marten]

Hi @broken mural would you mind sharing the URL of your deployment?

[broken mural]

sure

[broken mural]

https://jyjweb.vercel.app

[split marten]

Hi @broken mural 👋,
setting the view-transition-name for :root to none in DialogAnimation.astro lets your navigation from nosotros to servicios start with a blank page that only contains the header.

I think in your case you can safely skip those two rules.

  :root {
    view-transition-name: none;
  }
  ::view-transition {
    pointer-events: none;
  }

They are only important for same-document view transitions if you have long running animations and the users should be able to click somewhere outside the animated area while the animation is playing.

In your case, they hinder the cross-document view transitions.

[broken mural]

Thank you, I really appreciate your help. I was able to fix the error now

I didn't notice that mistake. Thanks!!!