-
Notifications
You must be signed in to change notification settings - Fork 1.3k
Description
Provide a general summary of the issue here
Hello!
React just promoted ViewTransition
to canary so I've decided to give them a try. One of their use case straight from documentation is animating list items being reordered. You can do this by wrapping your list element with ViewTransition
and updating the list in transition. Under the hood, when update is performed React have some heuristics around deciding which element should be animated, this is described a bit in the original implementation PR. This uses e.g. getBoundingClientRect
to decide whether element's size changed.
This causes issues when using RAC collection item, because they're rendered into the fake DOM first to collect info about collection items, as described here. However, this fake DOM doesn't implement getBoundingClientRect
so this causes error:

You can see the instance
here being the custom fake DOM node implementation from React Aria:

I think that's a similar thing causing issues as one here - facebook/react#33177 But getBoundingClientRect
is obviously widely available. Also, I think there're additional methods used later in the code, that React expects to work here, e.g. getComputedStyle
- I'm not sure how it'd work with these custom nodes, I assume it wouldn't.
🤔 Expected Behavior?
React's ViewTransition
works correctly with collection items, not causing any errors when animating and view transition properly invoked
😯 Current Behavior
Collection items cause error when React tries to decide whether it should be animated or not, when making render pass in the fake DOM.
💁 Possible Solution
Adding additional methods to the fake DOM? I'm not sure whether that'd be enough.
🔦 Context
As mentioned - trying out Canary features and whether they work correctly in one of my apps. ViewTransition
is really cool addition so I wanted to use it instead other ways of implementing FLIP animations.
🖥️ Steps to Reproduce
- Use React canary version
- Render list of items with some RAC collection, e.g. ListBox
- Wrap each
ListBoxItem
withViewTransition
- Trigger
ViewTransition
by reordering items inside of transition - Observe the error
I implemented really small reproduction, I've also added standard list so you can observe how it should behave. Just need to comment out the RAC list for a moment so error don't crash the render 😄
https://github.com/pawelblaszczyk5/rac-collections-view-transition
Screen.Recording.2025-10-07.at.20.11.50.mov
Version
RAC - 1.13.0
What browsers are you seeing the problem on?
Firefox, Safari, Microsoft Edge, Chrome, Other
If other, please specify.
Just everywhere 😄
What operating system are you using?
MacOS
🧢 Your Company/Team
N/A
🕷 Tracking Issue
No response