Warping transition while using overflow

[Joostdeboer]

What package within Headless UI are you using? @headlessui/react

What version of that package are you using? v1.7.13 / v1.7.17

What browser are you using?

Firefox, Chrome

Reproduction URL https://codesandbox.io/p/sandbox/lucid-margulis-zhcytl

Describe your issue Expected: Clicking the red button slides the menu in from the right without issue, allowing one to scroll in it while the background doesn't scroll along.

Actual: The menu slides in while warping (Firefox) or with an incorrect animation (Chrome).

This seems to be a result from adding isLeaving ? "overflow-y-hidden" : "overflow-y-scroll", where adding an overflow while using a transition seems to result in odd behaviour. Not using the overflow is not an option, as the dialog itself is supposed to be scrollable in the case where there is a lot of content.

[Joostdeboer]

I've looked at it once more with some colleagues of mine and noticed that we could restructure the component to add the "overflow-y-scoll" using the "entered" property of the Transition, and add the "overflow-y-hidden" on the "leave" property. Putting the Transition above the

which seemed to cause the warping then fixed the warping issue, while still showing the scrollbar and allowing it to work as intended.

Not sure if this is a bug then, or simply an error in how these elements should interact, so I'll leave it up for others to find or to be set to resolved.

[RobinMalfait]

Hey!

The Transition component itself handles the toggling of the necessary classes you provided, if certain combinations of classes result in strange warping or incorrect animations then that's likely a combination of classes that don't work together. I don't consider this part a bug of the component. Re-structuring the elements (which you did) can often solve this issue.

That said, we do have some other transition related bugs (especially around enter transitions in combination with server side rendering). These bugs are captured in some other issues already.

Since you solved this issue by re-structuring some of the elements, I'm going to close this for now. (And tackle the other bugs as part of the other open issues).

We definitely have some work to do to make the Transition component bulletproof.