Dialog Close Animation Flicker

[colinmorelli]

Provide a general summary of the issue here

It appears that the exit animation of dialogs is not being handled correctly, or I'm somehow misusing it.

🤔 Expected Behavior?

Dialogs/modals should show the exit animation, and then remove the elements from the DOM when the animation is complete.

😯 Current Behavior

The exit animation begins, and then often begins a second time, resulting in either an animation flicker or, in some cases, the element permanently remaining on screen.

💁 Possible Solution

I haven't been able to identify the cause yet, other than to say it seems to not be a state management issue with the dialog. The isOpen state is definitely set to false, once time, but the animation appears twice. In the cases where the element remains permanently on screen, isOpen is still set to false, indicating the issue is with animation handling. Indeed, removing animations from the elements works and ensure the dialog is always mounted/unmounted correctly.

🔦 Context

I'm not sure this context is worth much, but this did not seem to be happening two days ago. Or at least, I had not seen it happen. However, now, I can't get it to stop. Even downgrading react-aria does not seem to fix it. So either I was incorrect, and it was happening before, or something else (like a Chrome update) triggered the behavior.

🖥️ Steps to Reproduce

You should be able to see the behavior on this sandbox. Just click the open dialog button, and then the close dialog button. Pay attention to the close animation. It is regularly triggering twice for me. In my own application, the dialog sometimes also fails to close entirely. The exit animation shows, but the dialog reappears on screen after and is unresponsive. When I've been able to replicate this, the dialog state believes that it's closed, but the element is stuck with data-exiting animation set to true.

https://codesandbox.io/p/sandbox/dazzling-butterfly-d6xjvq

(Note: Apologies for the messy CSS. I just ripped my generated tailwind file and threw it in the codesandbox. I don't think the CSS declarations themselves are the problem, but perhaps they are).

Version

react-aria 3.43.1, react-aria-components 1.12.1

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

macOS Tahoe (26)

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[LFDanLu]

Did some digging and it seems to only happen in Chrome and only with durations that were greater than 300 which is odd. I tried stripping out the styling and only applied it on the Modal specifically without using tailwind and it seems to work fine: https://codesandbox.io/p/sandbox/mutable-sun-z54xc9. Could you try stripping down your tailwind css to see what the minimum is required to reproduce this?

[colinmorelli]

Update: I've figured out the top layer of what's going on, but can't find a root cause yet.

For whatever reason, the exit animation is being canceled. This leads to a promise rejection on the Animation.finished promise, which is then silently ignored inside useAnimation(). What I'm not sure of (yet) is why the original animation is being canceled.

[colinmorelli]

Ok, tl;dr: seems like it was my CSS, not a problem with aria (although I'll leave this open to see if we want to fix anything in aria).

Context
Tailwind includes a set of duration-* and ease-* utilities by default in v4, and tailwindcss-animate (a plugin I was using) also includes them. However, the tailwind default ones set transition-* properties, and the tailwindcss-animate helpers (of the same names), set animation-* properties.

Effectively, this meant that I was setting animation-* and transition-* properties, when I intended to only set animation-* properties.

In addition, for my project, I have a CSS rule of * { scrollbar-color: ... } to set scrollbar colors.

Cause
The problem is that when using transition-duration and transition-easing-function, CSS transitions are enabled. Because of the scrollbar rule, that meant that, during Modal animations, in addition to my intended fade out CSSAnimation, the browser was also adding a CSSTransition to the scrollbar, to track the transition on the scrollbar-color property. So, when closing the modal, and useAnimation was looking for active animations on the element, instead of finding 1 (the modal fade out), it was finding 2 (the modal fade out, and the scrollbar color transition). For whatever reason, the scrollbar color transition animation was being canceled, and, as a result, useAnimation was effectively no-op (it currently silently ignores canceled animations).

Open questions

1. It's not clear to me why a CSS transition was being created for the scrollbar-color property at all. Although the rule mentioned is present, there is no other rule that ever changes the scrollbar color.
2. It's also not clear to me why the CSS transition was being canceled for the scrollbar, but only in certain cases.

Regardless of the answers to the above, it might make sense for react-aria to handle cancelations of animations as well as successful completions. I'm not yet sure what problems this would cause.