Screen flickering on Dialog closes | Radix Themes

[mausam-giri]

Bug report

Current Behavior

Sample video, please notice the flickering I have provided the stackblitz project repo link please check.
https://github.com/user-attachments/assets/8aef7930-464f-470e-8ef7-16a7be11546d

Expected behavior

I expected this to close smoothly without any flickering issue visible to the users.

Reproducible example

StackBlitz Project Link https://stackblitz.com/edit/stackblitz-starters-fsfdnffv?file=app%2Fpage.tsx

Your environment

Software	Name(s)	Version
Radix Package(s)	themes	3.1.6
React	n/a	18.2.0
Next	n/a	13.5.1
Browser
Assistive tech
Node	n/a	v22.12.0
npm/yarn
Operating System

[marcoacierno]

I am seeing the same issue on Arc Version 1.74.0 (57065) / Chromium Engine Version 131.0.6778.205 both in this stackblitz repo and my own code.

This happens with both AlertDialog and Dialog. I just started using Radix, so I am not sure how to debug this yet, but I will try to find out more!

[marcoacierno]

I suspect this issue should be moved to https://github.com/radix-ui/themes

From some very rough debugging I found a solution by changing the times of the animations. .rt-BaseDialogOverlay &:where([data-state='closed'])::before { has been changed from 160ms to 200ms.

(the !important are probably not needed)

.rt-BaseDialogOverlay {
    &:where([data-state='closed']) {
        animation: rt-dialog-overlay-no-op 200ms cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
    &:where([data-state='open'])::before {
        animation: rt-fade-in 200ms cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
    &:where([data-state='closed'])::before {
        opacity: 0;
        animation: rt-fade-out 200ms cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
}

.rt-BaseDialogContent {
    &:where([data-state='open']) {
        animation: rt-dialog-content-show 200ms cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
    &:where([data-state='closed']) {
        opacity: 0;
        animation: rt-dialog-content-hide 100ms cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
}