diff --git a/packages/shared/src/focus-visible.ts b/packages/shared/src/focus-visible.ts
index 46da538e0c..c49a3a69a1 100644
--- a/packages/shared/src/focus-visible.ts
+++ b/packages/shared/src/focus-visible.ts
@@ -114,20 +114,26 @@ export const FocusVisiblePolyfillMixin = <
         // document:
         connectedCallback(): void {
             super.connectedCallback && super.connectedCallback();
-            if (this[$endPolyfillCoordination] == null) {
-                this[$endPolyfillCoordination] = coordinateWithPolyfill(this);
-            }
+            requestAnimationFrame(() => {
+                if (this[$endPolyfillCoordination] == null) {
+                    this[$endPolyfillCoordination] = coordinateWithPolyfill(
+                        this
+                    );
+                }
+            });
         }
 
         disconnectedCallback(): void {
             super.disconnectedCallback && super.disconnectedCallback();
             // It's important to remove the polyfill event listener when we
             // disconnect, otherwise we will leak the whole element via window:
-            if (this[$endPolyfillCoordination] != null) {
-                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                this[$endPolyfillCoordination]!();
-                this[$endPolyfillCoordination] = null;
-            }
+            requestAnimationFrame(() => {
+                if (this[$endPolyfillCoordination] != null) {
+                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                    this[$endPolyfillCoordination]!();
+                    this[$endPolyfillCoordination] = null;
+                }
+            });
         }
     }
 
diff --git a/packages/shared/src/focusable.ts b/packages/shared/src/focusable.ts
index 16512528ff..70a53c2337 100644
--- a/packages/shared/src/focusable.ts
+++ b/packages/shared/src/focusable.ts
@@ -135,12 +135,14 @@ export class Focusable extends FocusVisiblePolyfillMixin(SpectrumElement) {
     protected manageAutoFocus(): void {
         if (this.autofocus) {
             /* Trick :focus-visible polyfill into thinking keyboard based focus */
-            this.dispatchEvent(
-                new KeyboardEvent('keydown', {
-                    code: 'Tab',
-                })
-            );
-            this.focusElement.focus();
+            requestAnimationFrame(() => {
+                this.dispatchEvent(
+                    new KeyboardEvent('keydown', {
+                        code: 'Tab',
+                    })
+                );
+                this.focusElement.focus();
+            });
         }
     }