diff --git a/src/components/dialog/dialog.tsx b/src/components/dialog/dialog.tsx
index 0f7cc38d3..1b93c2dd0 100644
--- a/src/components/dialog/dialog.tsx
+++ b/src/components/dialog/dialog.tsx
@@ -104,7 +104,7 @@ export class Dialog {
 
     this.dialog.hidden = false;
     this.host.clientWidth; // force a reflow
-    this.open = true;
+    requestAnimationFrame(() => (this.open = true));
 
     lockBodyScrolling(this.host);
     document.addEventListener('focusin', this.handleDocumentFocusIn);