[Collapse] Horizontal Collapse is twitching

[tomashauser]

Steps to reproduce

Steps:

1. Open this link to live example: https://codesandbox.io/p/sandbox/transition-group-with-horizontal-collapse-2frjrp
2. Click on the "Add" button several times

Current behavior

In some instances a strange twitching happens. This event stretches the page, hence why there is a scrollbar for a brief moment. The card has a full width for a split second, and then it goes back to 0 width and expands slowly.

Expected behavior

The animation is smooth. There is no twitching, it starts from 0 width and expands as expected.

Context

I'm trying to achieve this exact scenario from the documentation but in a horizontal manner.

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: horizontal, collapse, twitching, transition-group

[ZeeshanTamboli]

@tomashauser I can only reproduce this in CodeSandbox and StackBlitz, not locally. Here's a video where I am running it locally in dev mode:

Screen-Recording.mp4

Could it be due to the online editors running in an iframe? What's your use case? Can you test it locally in your app to see if it twitches?

[tomashauser]

@tomashauser I can only reproduce this in CodeSandbox and StackBlitz, not locally. Here's a video where I am running it locally in dev mode:

Screen-Recording.mp4
Could it be due to the online editors running in an iframe? What's your use case? Can you test it locally in your app to see if it twitches?

This could be an OS thing I guess. If I download and run the sandbox app on my localhost, I get the exact same behavior (see the video).
I'm using Microsoft Windows 11 Pro 10.0.26100 N/A Build 26100. The browser version is irelevant as I'm getting this exact behavior in Edge, Mozilla and Chrome.

twitching-collapse.mp4

[ZeeshanTamboli]

I tested it locally after downloading the CodeSandbox and can reproduce it. I'll mark it as a bug.