diff --git a/core/src/components/ripple-effect/test/basic/ripple-effect.e2e.ts b/core/src/components/ripple-effect/test/basic/ripple-effect.e2e.ts
index 033bff3ce7..9f6006ee37 100644
--- a/core/src/components/ripple-effect/test/basic/ripple-effect.e2e.ts
+++ b/core/src/components/ripple-effect/test/basic/ripple-effect.e2e.ts
@@ -19,6 +19,7 @@ test.describe('ripple-effect: basic', () => {
   test.describe('ripple effect with nested ion-button', () => {
     test('should add .ion-activated when the block is pressed', async ({ page }) => {
       await page.goto('/src/components/ripple-effect/test/basic?ionic:_testing=false');
+      await isIdleCallbackComplete(page);
 
       const el = page.locator('#ripple-with-button');
 
@@ -45,6 +46,7 @@ test.describe('ripple-effect: basic', () => {
 
 const verifyRippleEffect = async (page: E2EPage, selector: string) => {
   await page.goto('/src/components/ripple-effect/test/basic?ionic:_testing=false');
+  await isIdleCallbackComplete(page);
 
   const el = page.locator(selector);
 
@@ -61,3 +63,24 @@ const verifyRippleEffect = async (page: E2EPage, selector: string) => {
 
   await expect(el).toHaveClass(/ion-activated/);
 };
+
+/**
+ * This function is used to wait for the idle callback to be called.
+ * It mirrors the custom implementation in app.tsx for either
+ * using requestIdleCallback on supported browsers or a setTimeout
+ * of 32ms (~2 frames) on unsupported browsers (Safari).
+ */
+const isIdleCallbackComplete = async (page: E2EPage) => {
+  await page.waitForFunction(
+    () => {
+      return new Promise((resolve) => {
+        if ('requestIdleCallback' in window) {
+          window.requestIdleCallback(resolve);
+        } else {
+          setTimeout(resolve, 32);
+        }
+      });
+    },
+    { timeout: 5000 }
+  );
+};