Element background flashes when using <ClientRouter />

[wolf-yuan-6115]

Astro Info

Astro                    v5.0.5
Node                     v22.3.0
System                   Windows (x64)
Package Manager          pnpm
Output                   static
Adapter                  none
Integrations             @astrojs/tailwind
                         @astrojs/sitemap
                         astro-icon
                         @astrojs/mdx
                         @playform/compress

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

Firefox

Describe the Bug

When using <ClientRouter /> (Previosly <ViewTransitions />) on Firefox with dark themed background, the element will be lighter when switching between pages.

2024-12-11.23-12-17.mp4

Seems like d7779df fixed flashing issue for website using light themed background when using <ClientRouter /> on Firefox. But on dark themed background website, it doesn't looks good.

What's the expected result?

This is website before d7779df merged into main with #12046, which shipped with [email protected]

2024-12-11.23-13-02.mp4

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-tgfpwccu

Participation

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

[martrapp]

Hi @wolf-yuan-6115 👋🏼, yes you are right! The mix-blend-mode settings only work for a real cross fade. As the simulation on Firefox does a fade-out followed by a fade-in, this looks bad.

As a temporary fix you might try to revert the effects by redefining the key frames in your global CSS styles:

@keyframes astroFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes astroFadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

[wolf-yuan-6115]

Hi @wolf-yuan-6115 👋🏼, yes you are right! The mix-blend-mode settings only work for a real cross fade. As the simulation on Firefox does a fade-out followed by a fade-in, this looks bad.

As a temporary fix you might try to revert the effects by redefining the key frames in your global CSS styles:

@keyframes astroFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes astroFadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

Looks good, I'll try to find a way to get around this issue.

[martrapp]

Should be possible to make Astro generate smarter styles, but i am not sure yet how much effort that will require