diff --git a/src/components/drawer/drawer.tsx b/src/components/drawer/drawer.tsx
index e7d6ffe5a..7394d7da9 100644
--- a/src/components/drawer/drawer.tsx
+++ b/src/components/drawer/drawer.tsx
@@ -112,7 +112,7 @@ export class Drawer {
 
     this.drawer.hidden = false;
     this.host.clientWidth; // force a reflow
-    this.open = true;
+    requestAnimationFrame(() => (this.open = true));
 
     // Lock body scrolling only if the drawer isn't contained
     if (!this.contained) {