Skip to content

React ViewTransition used within RAC collection item cause error #8989

@pawelblaszczyk5

Description

@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:

Image

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

Image

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions