Dialog overlay flashing in React 19

[Semesse]

Closing the Dialog causes the overlay to have a high chance to flash

Repro: https://codesandbox.io/p/sandbox/42tyf8

From my investigation it seems to relate to this, after setting animationFillMode to forwards the overlay becomes visible again

[dann-dann]

Experiencing same issue.

This solution worked for me
radix-ui/primitives#3286 (comment)

[Sang-minKIM]

I suspect the flickering occurs because the dialog close and overlay fade-out are running as separate animations with different timings. It seems that these multiple animation keyframes were causing visual inconsistencies when conflicting with each other. The issue can be resolved by replacing animations with transitions for the closing state.

Here's the solution that worked for me:

.rt-BaseDialogOverlay {
  &:where([data-state='closed']) {
    animation: none !important;
  }
  &:where([data-state='open'])::before {
    animation: rt-fade-in 150ms cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
  &:where([data-state='closed'])::before {
    animation: none !important;
    opacity: 0;
    transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
  }
}

.rt-BaseDialogContent {
  &:where([data-state='open']) {
    animation: rt-dialog-content-show 150ms cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
  &:where([data-state='closed']) {
    animation: none !important;
    opacity: 0;
    transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
  }
}