React ViewTransition used within RAC collection item cause error

[pawelblaszczyk5]

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

1. Use React canary version
2. Render list of items with some RAC collection, e.g. ListBox
3. Wrap each ListBoxItem with ViewTransition
4. Trigger ViewTransition by reordering items inside of transition
5. 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

[snowystinger]

Wonder if we could wrap our fake dom in <ViewTransition update="none"> if it exists.

Otherwise, how does React handle it when in a server setting, perhaps we can do something similar.

JSDOM also doesn't really implement it, maybe it's enough to just have it return all 0's?
I don't see the React team doing anything to getBoundingClientRect in their own tests or in their setup of the tests https://github.com/facebook/react/blob/main/packages/react-dom/src/__tests__/ReactDOMFizzViewTransition-test.js

[pawelblaszczyk5]

I think heuristics during SSR render are a little bit different and still WIP? https://react.dev/reference/react/ViewTransition#animating-from-suspense-content

Also afaik there’s no way to overwrite and disable ViewTransition for part of sub tree

[snowystinger]

Also afaik there’s no way to overwrite and disable ViewTransition for part of sub tree

Ah, is that not what https://react.dev/reference/react/ViewTransition#opting-out-of-an-animation does? Maybe I'm reading it wrong, if so, that's annoying

[pawelblaszczyk5]

Also afaik there’s no way to overwrite and disable ViewTransition for part of sub tree

Ah, is that not what https://react.dev/reference/react/ViewTransition#opting-out-of-an-animation does? Maybe I'm reading it wrong, if so, that's annoying

Tbh I completely missed that, sorry 😅 That seems like a potential solution

[snowystinger]

Hey, we had a chance to talk about this today as a team. We think my proposed solution won't work. Instead, what we want to try now is forwarding the boundingClientRect from the real dom to the fake one and see what else breaks. We're not entirely sure all the assumptions that React is making here, so will have to be a bit of try and see.

I believe the place to add it would be around here

react-spectrum/packages/@react-aria/collections/src/Document.ts

Line 219 in 49bb12c

removeEventListener(): void {}

Looks like setProps below will set the ref in props. I tried just quickly adding a bounding rect function that returned some dummy values to see if that would quickly uncover anything else.
It would appear the next thing that React wants is getComputedStyle, so we'll probably have to figure out some way to translate between the fake dom target and the real one for that as well.