diff --git a/packages/calcite-components/src/components/stepper/stepper.tsx b/packages/calcite-components/src/components/stepper/stepper.tsx
index 2e239b308eb..742e595e90f 100644
--- a/packages/calcite-components/src/components/stepper/stepper.tsx
+++ b/packages/calcite-components/src/components/stepper/stepper.tsx
@@ -11,7 +11,6 @@ import {
   State,
   VNode,
   Watch,
-  readTask,
 } from "@stencil/core";
 import { focusElementInGroup, slotChangeGetAssignedElements } from "../../utils/dom";
 import { Position, Scale } from "../interfaces";
@@ -356,7 +355,7 @@ export class Stepper implements LocalizedComponent, T9nComponent {
 
   @Watch("currentActivePosition")
   handlePositionChange(): void {
-    readTask((): void => {
+    requestAnimationFrame((): void => {
       this.determineActiveStepper();
     });
   }
diff --git a/packages/calcite-components/src/components/tab-nav/tab-nav.tsx b/packages/calcite-components/src/components/tab-nav/tab-nav.tsx
index ab5d5f1c958..50577ada992 100644
--- a/packages/calcite-components/src/components/tab-nav/tab-nav.tsx
+++ b/packages/calcite-components/src/components/tab-nav/tab-nav.tsx
@@ -7,7 +7,6 @@ import {
   Host,
   Listen,
   Prop,
-  readTask,
   State,
   VNode,
   Watch,
@@ -262,7 +261,7 @@ export class TabNav implements LocalizedComponent, T9nComponent {
       return;
     }
 
-    readTask(() => {
+    requestAnimationFrame(() => {
       const isLTR = this.effectiveDir === "ltr";
       const tabTitleContainer = this.tabTitleContainerEl;
       const containerBounds = tabTitleContainer.getBoundingClientRect();
@@ -487,7 +486,7 @@ export class TabNav implements LocalizedComponent, T9nComponent {
   }
 
   private scrollToTabTitles = (direction: "forward" | "backward"): void => {
-    readTask(() => {
+    requestAnimationFrame(() => {
       const tabTitleContainer = this.tabTitleContainerEl;
       const containerBounds = tabTitleContainer.getBoundingClientRect();
       const tabTitles = Array.from(this.el.querySelectorAll("calcite-tab-title"));
diff --git a/packages/calcite-components/src/utils/openCloseComponent.spec.ts b/packages/calcite-components/src/utils/openCloseComponent.spec.ts
index 2e865c6ea4b..470ee7299c0 100644
--- a/packages/calcite-components/src/utils/openCloseComponent.spec.ts
+++ b/packages/calcite-components/src/utils/openCloseComponent.spec.ts
@@ -9,7 +9,10 @@ describe("openCloseComponent", () => {
     let dispatchTransitionEvent: TransitionEventDispatcher;
 
     beforeEach(() => {
-      jest.spyOn(openCloseComponent, "internalReadTask").mockImplementation((task) => task(1337));
+      jest.spyOn(global, "requestAnimationFrame").mockImplementation((cb) => {
+        cb(0);
+        return 0;
+      });
       dispatchTransitionEvent = createTransitionEventDispatcher();
     });
 
diff --git a/packages/calcite-components/src/utils/openCloseComponent.ts b/packages/calcite-components/src/utils/openCloseComponent.ts
index 3ee33162dc7..19fbdaa9b32 100644
--- a/packages/calcite-components/src/utils/openCloseComponent.ts
+++ b/packages/calcite-components/src/utils/openCloseComponent.ts
@@ -1,11 +1,5 @@
-import { readTask } from "@stencil/core";
 import { whenTransitionDone } from "./dom";
 
-/**
- * Exported for testing purposes only
- */
-export const internalReadTask = readTask;
-
 /**
  * Defines interface for components with open/close public emitter.
  * All implementations of this interface must handle the following events: `beforeOpen`, `open`, `beforeClose`, `close`.
@@ -86,7 +80,7 @@ function isOpen(component: OpenCloseComponent): boolean {
  * @param component - OpenCloseComponent uses `open` prop to emit (before)open/close.
  */
 export function onToggleOpenCloseComponent(component: OpenCloseComponent): void {
-  internalReadTask((): void => {
+  requestAnimationFrame((): void => {
     if (!component.transitionEl) {
       return;
     }