react icon indicating copy to clipboard operation
react copied to clipboard

Bug: View transitions don't work in Firefox

Open sumanthratna opened this issue 2 months ago • 2 comments

React version: 19.2

Steps To Reproduce

when I go to https://react.dev/blog/2025/04/23/react-labs-view-transitions-activity-and-more, none of the view transitions show the cross-fade animations in Firefox Developer Edition (145.0b5 (aarch64)). However, I see the animations in both Safari (Version 26.0.1 (21622.1.22.11.15)) and Google Chrome (Version 141.0.7390.109).

In all three browsers, I see no relevant warnings in devtools, and no errors.

The current behavior

The expected behavior

sumanthratna avatar Oct 22 '25 20:10 sumanthratna

I can reproduce this. Has anyone tried with latest nightly version? Maybe its related to the Navigation API. https://developer.mozilla.org/en-US/docs/Web/API/Navigation_API#browser_compatibility

eljose47 avatar Nov 27 '25 13:11 eljose47

I can reproduce this on Firefox as well.

This looks like a browser support limitation rather than a React bug. <ViewTransition> relies on the browser View Transition API (document.startViewTransition), which is currently supported in Chrome/Chromium (and Safari to some extent), but not shipped in stable Firefox yet.

You can see the current browser support status here:

  • MDN View Transition API compatibility table: https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API#browser_compatibility

In Chrome/Safari the blog examples cross-fade as expected, but in Firefox the underlying View Transition API isn’t available, so React can’t animate.

This might be worth clarifying in the blog/docs (e.g. that View Transitions require browsers with View Transition API support, and that Firefox doesn’t support it yet), but it doesn’t appear to be a React bug itself.

lindseystead avatar Dec 02 '25 09:12 lindseystead