diff --git a/core/src/components/popover/test/arrow/e2e.ts b/core/src/components/popover/test/arrow/e2e.ts
deleted file mode 100644
index 6962564627..0000000000
--- a/core/src/components/popover/test/arrow/e2e.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('popover - arrow side: top', async () => {
-  await testPopover('top', false);
-});
-
-test('popover - arrow side: right', async () => {
-  await testPopover('right', false);
-});
-
-test('popover - arrow side: bottom', async () => {
-  await testPopover('bottom', false);
-});
-
-test('popover - arrow side: left', async () => {
-  await testPopover('left', false);
-});
-
-test('popover - arrow side: start', async () => {
-  await testPopover('start', false);
-});
-
-test('popover - arrow side: end', async () => {
-  await testPopover('end', false);
-});
-
-test('popover - arrow side: start, rtl', async () => {
-  await testPopover('start', true);
-});
-
-test('popover - arrow side: end, rtl', async () => {
-  await testPopover('end', true);
-});
-
-const testPopover = async (side: string, isRTL = false) => {
-  const rtl = isRTL ? '&rtl=true' : '';
-  const page = await newE2EPage({ url: `/src/components/popover/test/arrow?ionic:_testing=true${rtl}` });
-
-  const POPOVER_CLASS = `${side}-popover`;
-  const TRIGGER_ID = `${side}-trigger`;
-  const screenshotCompares = [];
-
-  const trigger = await page.find(`#${TRIGGER_ID}`);
-
-  await page.evaluate((POPOVER_TRIGGER_ID) => {
-    const popoverTrigger = document.querySelector(`#${POPOVER_TRIGGER_ID}`);
-    popoverTrigger?.scrollIntoView({ block: 'center' });
-  }, TRIGGER_ID);
-
-  trigger.click();
-
-  await page.waitForSelector(`.${POPOVER_CLASS}`);
-  const popover = await page.find(`.${POPOVER_CLASS}`);
-  await popover.waitForVisible();
-
-  screenshotCompares.push(await page.compareScreenshot());
-
-  for (const screenshotCompare of screenshotCompares) {
-    expect(screenshotCompare).toMatchScreenshot();
-  }
-};
diff --git a/core/src/components/popover/test/arrow/index.html b/core/src/components/popover/test/arrow/index.html
index d5db907e12..3586c78659 100644
--- a/core/src/components/popover/test/arrow/index.html
+++ b/core/src/components/popover/test/arrow/index.html
@@ -13,10 +13,13 @@
     <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
     <style>
+      ion-app > ion-content {
+        --background: #dddddd;
+      }
       .grid {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
-        grid-row-gap: 20px;
+        grid-row-gap: 80px;
         grid-column-gap: 20px;
 
         padding: 200px;
@@ -54,42 +57,48 @@
           <div class="grid-item">
             <h2>Top</h2>
             <ion-button id="top-trigger">Click to Open</ion-button>
-            <ion-popover class="top-popover" trigger="top-trigger" side="top" size="cover">
+            <ion-popover show-backdrop="false" class="top-popover" trigger="top-trigger" side="top" size="cover">
               <ion-content class="ion-padding"> Hello World </ion-content>
             </ion-popover>
           </div>
           <div class="grid-item">
             <h2>Right</h2>
             <ion-button id="right-trigger">Click to Open</ion-button>
-            <ion-popover class="right-popover" trigger="right-trigger" side="right" size="cover">
+            <ion-popover show-backdrop="false" class="right-popover" trigger="right-trigger" side="right" size="cover">
               <ion-content class="ion-padding"> Hello World </ion-content>
             </ion-popover>
           </div>
           <div class="grid-item">
             <h2>Bottom</h2>
             <ion-button id="bottom-trigger">Click to Open</ion-button>
-            <ion-popover class="bottom-popover" trigger="bottom-trigger" side="bottom" size="cover">
+            <ion-popover
+              show-backdrop="false"
+              class="bottom-popover"
+              trigger="bottom-trigger"
+              side="bottom"
+              size="cover"
+            >
               <ion-content class="ion-padding"> Hello World </ion-content>
             </ion-popover>
           </div>
           <div class="grid-item">
             <h2>Left</h2>
             <ion-button id="left-trigger">Click to Open</ion-button>
-            <ion-popover class="left-popover" trigger="left-trigger" side="left" size="cover">
+            <ion-popover show-backdrop="false" class="left-popover" trigger="left-trigger" side="left" size="cover">
               <ion-content class="ion-padding"> Hello World </ion-content>
             </ion-popover>
           </div>
           <div class="grid-item">
             <h2>Start</h2>
             <ion-button id="start-trigger">Click to Open</ion-button>
-            <ion-popover class="start-popover" trigger="start-trigger" side="start" size="cover">
+            <ion-popover show-backdrop="false" class="start-popover" trigger="start-trigger" side="start" size="cover">
               <ion-content class="ion-padding"> Hello World </ion-content>
             </ion-popover>
           </div>
           <div class="grid-item">
             <h2>End</h2>
             <ion-button id="end-trigger">Click to Open</ion-button>
-            <ion-popover class="end-popover" trigger="end-trigger" side="end" size="cover">
+            <ion-popover show-backdrop="false" class="end-popover" trigger="end-trigger" side="end" size="cover">
               <ion-content class="ion-padding"> Hello World </ion-content>
             </ion-popover>
           </div>
diff --git a/core/src/components/popover/test/arrow/popover.e2e.ts b/core/src/components/popover/test/arrow/popover.e2e.ts
new file mode 100644
index 0000000000..e144e74a3a
--- /dev/null
+++ b/core/src/components/popover/test/arrow/popover.e2e.ts
@@ -0,0 +1,23 @@
+import { expect } from '@playwright/test';
+import { test, Viewports } from '@utils/test/playwright';
+
+import { openPopover } from '../test.utils';
+
+test.describe('popover: arrow rendering', async () => {
+  /**
+   * The popovers have showBackdrop=false so we can open all of them at once
+   * and massively cut down on screenshots taken. The content has its own
+   * backdrop so you can still see the popovers.
+   */
+  test('should not have visual regressions', async ({ page }) => {
+    await page.goto('/src/components/popover/test/arrow');
+    await page.setViewportSize(Viewports.tablet.portrait); // avoid extra-long viewport screenshots
+
+    const sides = ['top', 'right', 'bottom', 'left', 'start', 'end'];
+    for (const side of sides) {
+      await openPopover(page, `${side}-trigger`, true);
+    }
+
+    expect(await page.screenshot()).toMatchSnapshot(`popover-arrow-${page.getSnapshotSettings()}.png`);
+  });
+});
diff --git a/core/src/components/popover/test/arrow/popover.e2e.ts-snapshots/popover-arrow-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/popover/test/arrow/popover.e2e.ts-snapshots/popover-arrow-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..bb474c7d99
Binary files /dev/null and b/core/src/components/popover/test/arrow/popover.e2e.ts-snapshots/popover-arrow-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/arrow/popover.e2e.ts-snapshots/popover-arrow-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/popover/test/arrow/popover.e2e.ts-snapshots/popover-arrow-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..b71200f4db
Binary files /dev/null and b/core/src/components/popover/test/arrow/popover.e2e.ts-snapshots/popover-arrow-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/arrow/popover.e2e.ts-snapshots/popover-arrow-ios-ltr-Mobile-Safari-linux.png b/core/src/components/popover/test/arrow/popover.e2e.ts-snapshots/popover-arrow-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..5b15c7c8ca
Binary files /dev/null and b/core/src/components/popover/test/arrow/popover.e2e.ts-snapshots/popover-arrow-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/arrow/popover.e2e.ts-snapshots/popover-arrow-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/popover/test/arrow/popover.e2e.ts-snapshots/popover-arrow-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..196e5aeb1c
Binary files /dev/null and b/core/src/components/popover/test/arrow/popover.e2e.ts-snapshots/popover-arrow-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/arrow/popover.e2e.ts-snapshots/popover-arrow-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/popover/test/arrow/popover.e2e.ts-snapshots/popover-arrow-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..a5706b42f4
Binary files /dev/null and b/core/src/components/popover/test/arrow/popover.e2e.ts-snapshots/popover-arrow-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/arrow/popover.e2e.ts-snapshots/popover-arrow-ios-rtl-Mobile-Safari-linux.png b/core/src/components/popover/test/arrow/popover.e2e.ts-snapshots/popover-arrow-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..017ceaaa1a
Binary files /dev/null and b/core/src/components/popover/test/arrow/popover.e2e.ts-snapshots/popover-arrow-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/arrow/popover.e2e.ts-snapshots/popover-arrow-md-ltr-Mobile-Chrome-linux.png b/core/src/components/popover/test/arrow/popover.e2e.ts-snapshots/popover-arrow-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..ae9211aacf
Binary files /dev/null and b/core/src/components/popover/test/arrow/popover.e2e.ts-snapshots/popover-arrow-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/arrow/popover.e2e.ts-snapshots/popover-arrow-md-ltr-Mobile-Firefox-linux.png b/core/src/components/popover/test/arrow/popover.e2e.ts-snapshots/popover-arrow-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..1d95d875f8
Binary files /dev/null and b/core/src/components/popover/test/arrow/popover.e2e.ts-snapshots/popover-arrow-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/arrow/popover.e2e.ts-snapshots/popover-arrow-md-ltr-Mobile-Safari-linux.png b/core/src/components/popover/test/arrow/popover.e2e.ts-snapshots/popover-arrow-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..a80ee735b8
Binary files /dev/null and b/core/src/components/popover/test/arrow/popover.e2e.ts-snapshots/popover-arrow-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/arrow/popover.e2e.ts-snapshots/popover-arrow-md-rtl-Mobile-Chrome-linux.png b/core/src/components/popover/test/arrow/popover.e2e.ts-snapshots/popover-arrow-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..c6ed63bdf5
Binary files /dev/null and b/core/src/components/popover/test/arrow/popover.e2e.ts-snapshots/popover-arrow-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/arrow/popover.e2e.ts-snapshots/popover-arrow-md-rtl-Mobile-Firefox-linux.png b/core/src/components/popover/test/arrow/popover.e2e.ts-snapshots/popover-arrow-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..f949a4887e
Binary files /dev/null and b/core/src/components/popover/test/arrow/popover.e2e.ts-snapshots/popover-arrow-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/arrow/popover.e2e.ts-snapshots/popover-arrow-md-rtl-Mobile-Safari-linux.png b/core/src/components/popover/test/arrow/popover.e2e.ts-snapshots/popover-arrow-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..147f446abf
Binary files /dev/null and b/core/src/components/popover/test/arrow/popover.e2e.ts-snapshots/popover-arrow-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/basic/index.html b/core/src/components/popover/test/basic/index.html
index d29c3800b1..9ef6ba840c 100644
--- a/core/src/components/popover/test/basic/index.html
+++ b/core/src/components/popover/test/basic/index.html
@@ -20,52 +20,6 @@
 
   <body>
     <ion-app>
-      <ion-content class="ion-padding" id="content">
-        <ion-button
-          id="basic-popover"
-          expand="block"
-          onclick="presentPopover({ component: 'profile-page', event: event, htmlAttributes: { 'data-testid': 'basic-popover' } })"
-        >
-          Show Popover</ion-button
-        >
-        <ion-button
-          id="translucent-popover"
-          expand="block"
-          onclick="presentPopover({ component: 'translucent-page', event: event, translucent: true })"
-          >Show Translucent Popover</ion-button
-        >
-        <ion-button
-          id="long-list-popover"
-          expand="block"
-          color="secondary"
-          onclick="presentPopover({ component: 'list-page', event: event })"
-          >Show Long List Popover</ion-button
-        >
-        <ion-button
-          id="no-event-popover"
-          expand="block"
-          color="danger"
-          onclick="presentPopover({ component: 'profile-page' })"
-          >No Event Popover</ion-button
-        >
-        <ion-button
-          id="custom-class-popover"
-          expand="block"
-          color="tertiary"
-          onclick="presentPopover({ component: 'translucent-page', event: event, cssClass: 'my-custom-class' })"
-          >Custom Class Popover</ion-button
-        >
-        <ion-button id="header-popover" expand="block" onclick="presentPopover({ component: 'header-page' })"
-          >Popover With Header</ion-button
-        >
-        <ion-button
-          id="translucent-header-popover"
-          expand="block"
-          onclick="presentPopover({ component: 'translucent-header-page' })"
-          >Popover With Translucent Header</ion-button
-        >
-      </ion-content>
-
       <ion-content class="ion-padding" id="content">
         <ion-button
           id="basic-popover"
diff --git a/core/src/components/popover/test/basic/e2e.ts b/core/src/components/popover/test/basic/popover.e2e.ts
similarity index 51%
rename from core/src/components/popover/test/basic/e2e.ts
rename to core/src/components/popover/test/basic/popover.e2e.ts
index 5ab79e6ed5..de87579f2e 100644
--- a/core/src/components/popover/test/basic/e2e.ts
+++ b/core/src/components/popover/test/basic/popover.e2e.ts
@@ -1,142 +1,65 @@
-import type { E2EPage } from '@stencil/core/testing';
-import { newE2EPage } from '@stencil/core/testing';
+import { expect } from '@playwright/test';
+import type { E2EPage } from '@utils/test/playwright';
+import { test } from '@utils/test/playwright';
 
-import { testPopover } from '../test.utils';
+import { openPopover, screenshotPopover } from '../test.utils';
 
-const DIRECTORY = 'basic';
+test.describe('popover: rendering', async () => {
+  test('should not have visual regressions', async ({ page }) => {
+    const buttonIDs = [
+      'basic-popover',
+      'translucent-popover',
+      'long-list-popover',
+      'no-event-popover',
+      'custom-class-popover',
+      'header-popover',
+      'translucent-header-popover',
+    ];
 
-/**
- * Focusing happens async inside of popover so we need
- * to wait for the requestAnimationFrame to fire.
- */
-const expectActiveElementTextToEqual = async (page: E2EPage, textValue: string) => {
-  await page.evaluate((text) => document.activeElement!.textContent === text, textValue);
-};
-
-const getActiveElementSelectionStart = (page: E2EPage) => {
-  return page.evaluate(() =>
-    document.activeElement instanceof HTMLTextAreaElement ? document.activeElement.selectionStart : null
-  );
-};
-
-const getActiveElementScrollTop = (page: E2EPage) => {
-  return page.evaluate(() => {
-    // Returns the closest ion-textarea or active element
-    const target = document.activeElement!.closest('ion-textarea') ?? document.activeElement;
-    return target!.scrollTop;
+    for (const id of buttonIDs) {
+      await screenshotPopover(page, id, 'basic');
+    }
   });
-};
-
-test('popover: basic', async () => {
-  await testPopover(DIRECTORY, '#basic-popover');
 });
 
-test('popover: translucent', async () => {
-  await testPopover(DIRECTORY, '#translucent-popover');
+test.describe('popover: htmlAttributes', async () => {
+  test('should inherit attributes on host', async ({ page }) => {
+    await page.goto('/src/components/popover/test/basic');
+    await openPopover(page, 'basic-popover');
+
+    const alert = page.locator('ion-popover');
+    expect(alert).toHaveAttribute('data-testid', 'basic-popover');
+  });
 });
 
-test('popover: long list', async () => {
-  await testPopover(DIRECTORY, '#long-list-popover');
-});
+test.describe('popover: focus trap', async () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/src/components/popover/test/basic');
+  });
 
-test('popover: no event', async () => {
-  await testPopover(DIRECTORY, '#no-event-popover');
-});
-
-test('popover: custom class', async () => {
-  await testPopover(DIRECTORY, '#custom-class-popover');
-});
-
-test('popover: header', async () => {
-  await testPopover(DIRECTORY, '#header-popover');
-});
-
-test('popover: translucent header', async () => {
-  await testPopover(DIRECTORY, '#translucent-header-popover');
-});
-
-/**
- * RTL Tests
- */
-
-test('popover:rtl: basic', async () => {
-  await testPopover(DIRECTORY, '#basic-popover', true, true);
-});
-
-test('popover:rtl: translucent', async () => {
-  await testPopover(DIRECTORY, '#translucent-popover', true, true);
-});
-
-test('popover:rtl: long list', async () => {
-  await testPopover(DIRECTORY, '#long-list-popover', true, true);
-});
-
-test('popover:rtl: no event', async () => {
-  await testPopover(DIRECTORY, '#no-event-popover', true, true);
-});
-
-test('popover:rtl: custom class', async () => {
-  await testPopover(DIRECTORY, '#custom-class-popover', true, true);
-});
-
-test('popover:rtl: header', async () => {
-  await testPopover(DIRECTORY, '#header-popover', true);
-});
-
-test('popover:rtl: translucent header', async () => {
-  await testPopover(DIRECTORY, '#translucent-header-popover', true);
-});
-
-test('popover: htmlAttributes', async () => {
-  const page = await newE2EPage({ url: '/src/components/popover/test/basic?ionic:_testing=true' });
-
-  await page.click('#basic-popover');
-  await page.waitForSelector('#basic-popover');
-
-  const alert = await page.find('ion-popover');
-
-  expect(alert).not.toBe(null);
-  await alert.waitForVisible();
-
-  const attribute = await page.evaluate(() => document.querySelector('ion-popover')!.getAttribute('data-testid'));
-
-  expect(attribute).toEqual('basic-popover');
-});
-
-describe('popover: focus trap', () => {
-  it('should focus the first ion-item on ArrowDown', async () => {
-    const page = await newE2EPage({ url: '/src/components/popover/test/basic?ionic:_testing=true' });
-
-    await page.click('#basic-popover');
-
-    const popover = await page.find('ion-popover');
-
-    expect(popover).not.toBe(null);
-    await popover.waitForVisible();
+  test('should focus the first ion-item on ArrowDown', async ({ page }) => {
+    await openPopover(page, 'basic-popover');
 
     await page.keyboard.press('ArrowDown');
-
     await expectActiveElementTextToEqual(page, 'Item 0');
   });
 
-  it('should work with ion-item children', async () => {
-    const page = await newE2EPage({ url: '/src/components/popover/test/basic?ionic:_testing=true' });
-
-    await page.click('#basic-popover');
-    await page.waitForSelector('#basic-popover');
-
-    const popover = await page.find('ion-popover');
-
-    expect(popover).not.toBe(null);
-    await popover.waitForVisible();
+  test('should trap focus', async ({ page, browserName }) => {
+    await openPopover(page, 'basic-popover');
 
     await page.keyboard.press('Tab');
 
     await expectActiveElementTextToEqual(page, 'Item 0');
 
     await page.keyboard.down('Shift');
+    if (browserName === 'webkit') {
+      await page.keyboard.down('Alt');
+    }
     await page.keyboard.press('Tab');
     await page.keyboard.up('Shift');
+    if (browserName === 'webkit') {
+      await page.keyboard.up('Alt');
+    }
 
     await expectActiveElementTextToEqual(page, 'Item 3');
 
@@ -161,19 +84,17 @@ describe('popover: focus trap', () => {
     await expectActiveElementTextToEqual(page, 'Item 3');
   });
 
-  it('should not override keyboard interactions for textarea elements', async () => {
-    const page = await newE2EPage({ url: '/src/components/popover/test/basic?ionic:_testing=true' });
-
-    await page.waitForSelector('#popover-with-textarea');
-    await page.click('#popover-with-textarea');
-
-    const popover = await page.find('ion-popover');
-    await popover.waitForVisible();
-
-    await page.waitForFunction('document.activeElement.tagName === "ION-POPOVER"');
+  test('should not override keyboard interactions for textarea elements', async ({ page, browserName }) => {
+    await openPopover(page, 'popover-with-textarea');
+    await page.waitForFunction(() => document.activeElement?.tagName === 'ION-POPOVER');
 
     await page.keyboard.press('Tab');
-    // Checking within ion-textarea
+
+    // for Firefox, ion-textarea is focused first
+    // need to tab again to get to native input
+    if (browserName === 'firefox') {
+      await page.keyboard.press('Tab');
+    }
 
     let activeElementTagName = await page.evaluate(() => document.activeElement!.tagName);
     let scrollTop = null;
@@ -235,3 +156,27 @@ describe('popover: focus trap', () => {
     expect(scrollTop).toBeGreaterThanOrEqual(previousScrollTop);
   });
 });
+
+// TODO(FW-1424): convert these to Playwright assertions where possible
+
+/**
+ * Focusing happens async inside of popover so we need
+ * to wait for the requestAnimationFrame to fire.
+ */
+const expectActiveElementTextToEqual = async (page: E2EPage, textValue: string) => {
+  await page.evaluate((text) => document.activeElement!.textContent === text, textValue);
+};
+
+const getActiveElementSelectionStart = (page: E2EPage) => {
+  return page.evaluate(() =>
+    document.activeElement instanceof HTMLTextAreaElement ? document.activeElement.selectionStart : null
+  );
+};
+
+const getActiveElementScrollTop = (page: E2EPage) => {
+  return page.evaluate(() => {
+    // Returns the closest ion-textarea or active element
+    const target = document.activeElement!.closest('ion-textarea') ?? document.activeElement;
+    return target!.scrollTop;
+  });
+};
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-basic-popover-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-basic-popover-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..56206a1195
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-basic-popover-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-basic-popover-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-basic-popover-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..cdd078c788
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-basic-popover-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-basic-popover-ios-ltr-Mobile-Safari-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-basic-popover-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..84dfa08ff2
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-basic-popover-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-basic-popover-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-basic-popover-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..8ecf5931b7
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-basic-popover-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-basic-popover-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-basic-popover-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..a50234abf6
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-basic-popover-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-basic-popover-ios-rtl-Mobile-Safari-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-basic-popover-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..65cd00f632
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-basic-popover-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-basic-popover-md-ltr-Mobile-Chrome-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-basic-popover-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..660ee0f5b7
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-basic-popover-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-basic-popover-md-ltr-Mobile-Firefox-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-basic-popover-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..8b5d3a46af
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-basic-popover-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-basic-popover-md-ltr-Mobile-Safari-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-basic-popover-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..472cc126e8
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-basic-popover-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-basic-popover-md-rtl-Mobile-Chrome-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-basic-popover-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..0439b34349
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-basic-popover-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-basic-popover-md-rtl-Mobile-Firefox-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-basic-popover-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..18dd4a46ee
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-basic-popover-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-basic-popover-md-rtl-Mobile-Safari-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-basic-popover-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..423885bb87
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-basic-popover-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-custom-class-popover-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-custom-class-popover-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..ec0d37ff56
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-custom-class-popover-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-custom-class-popover-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-custom-class-popover-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..018e591a38
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-custom-class-popover-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-custom-class-popover-ios-ltr-Mobile-Safari-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-custom-class-popover-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..568f85ea72
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-custom-class-popover-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-custom-class-popover-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-custom-class-popover-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..9bddefcb02
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-custom-class-popover-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-custom-class-popover-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-custom-class-popover-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..60d2b0ad49
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-custom-class-popover-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-custom-class-popover-ios-rtl-Mobile-Safari-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-custom-class-popover-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..c827e0da3f
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-custom-class-popover-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-custom-class-popover-md-ltr-Mobile-Chrome-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-custom-class-popover-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..57d663f12f
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-custom-class-popover-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-custom-class-popover-md-ltr-Mobile-Firefox-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-custom-class-popover-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..89a68a6935
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-custom-class-popover-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-custom-class-popover-md-ltr-Mobile-Safari-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-custom-class-popover-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..afee5bc117
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-custom-class-popover-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-custom-class-popover-md-rtl-Mobile-Chrome-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-custom-class-popover-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..ef6972e255
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-custom-class-popover-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-custom-class-popover-md-rtl-Mobile-Firefox-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-custom-class-popover-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..229ddc744a
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-custom-class-popover-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-custom-class-popover-md-rtl-Mobile-Safari-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-custom-class-popover-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..e43f97ee1b
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-custom-class-popover-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-header-popover-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-header-popover-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..1044784352
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-header-popover-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-header-popover-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-header-popover-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..06544c3017
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-header-popover-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-header-popover-ios-ltr-Mobile-Safari-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-header-popover-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..c5ba9e305c
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-header-popover-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-header-popover-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-header-popover-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..c3c2588480
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-header-popover-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-header-popover-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-header-popover-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..a993412ded
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-header-popover-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-header-popover-ios-rtl-Mobile-Safari-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-header-popover-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..886c15118a
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-header-popover-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-header-popover-md-ltr-Mobile-Chrome-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-header-popover-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..ab9fce5416
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-header-popover-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-header-popover-md-ltr-Mobile-Firefox-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-header-popover-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..6efa6e9389
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-header-popover-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-header-popover-md-ltr-Mobile-Safari-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-header-popover-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..88515d849d
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-header-popover-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-header-popover-md-rtl-Mobile-Chrome-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-header-popover-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..cf7843606f
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-header-popover-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-header-popover-md-rtl-Mobile-Firefox-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-header-popover-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..78bdc043d4
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-header-popover-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-header-popover-md-rtl-Mobile-Safari-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-header-popover-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..eb83b4981f
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-header-popover-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-long-list-popover-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-long-list-popover-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..8aa6bbdb0f
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-long-list-popover-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-long-list-popover-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-long-list-popover-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..dcea871176
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-long-list-popover-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-long-list-popover-ios-ltr-Mobile-Safari-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-long-list-popover-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..10ef6534fd
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-long-list-popover-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-long-list-popover-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-long-list-popover-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..e1df11046c
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-long-list-popover-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-long-list-popover-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-long-list-popover-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..cc9f01d04b
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-long-list-popover-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-long-list-popover-ios-rtl-Mobile-Safari-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-long-list-popover-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..6cc8e6baf7
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-long-list-popover-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-long-list-popover-md-ltr-Mobile-Chrome-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-long-list-popover-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..bd18a69d5c
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-long-list-popover-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-long-list-popover-md-ltr-Mobile-Firefox-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-long-list-popover-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..ca936360ec
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-long-list-popover-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-long-list-popover-md-ltr-Mobile-Safari-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-long-list-popover-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..34bad5a0e7
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-long-list-popover-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-long-list-popover-md-rtl-Mobile-Chrome-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-long-list-popover-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..7e6a0dfcb3
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-long-list-popover-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-long-list-popover-md-rtl-Mobile-Firefox-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-long-list-popover-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..8c1bfa6087
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-long-list-popover-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-long-list-popover-md-rtl-Mobile-Safari-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-long-list-popover-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..76f73262f3
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-long-list-popover-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-no-event-popover-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-no-event-popover-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..23fdf95ef4
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-no-event-popover-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-no-event-popover-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-no-event-popover-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..03a732e80b
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-no-event-popover-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-no-event-popover-ios-ltr-Mobile-Safari-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-no-event-popover-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..b4da6014b4
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-no-event-popover-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-no-event-popover-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-no-event-popover-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..0dabb14185
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-no-event-popover-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-no-event-popover-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-no-event-popover-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..9a00198b5b
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-no-event-popover-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-no-event-popover-ios-rtl-Mobile-Safari-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-no-event-popover-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..1d34b4acc8
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-no-event-popover-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-no-event-popover-md-ltr-Mobile-Chrome-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-no-event-popover-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..c6356e1e6c
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-no-event-popover-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-no-event-popover-md-ltr-Mobile-Firefox-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-no-event-popover-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..903e502168
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-no-event-popover-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-no-event-popover-md-ltr-Mobile-Safari-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-no-event-popover-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..8be5126de0
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-no-event-popover-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-no-event-popover-md-rtl-Mobile-Chrome-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-no-event-popover-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..a856473934
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-no-event-popover-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-no-event-popover-md-rtl-Mobile-Firefox-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-no-event-popover-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..95470fdb68
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-no-event-popover-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-no-event-popover-md-rtl-Mobile-Safari-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-no-event-popover-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..c622dd6908
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-no-event-popover-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-header-popover-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-header-popover-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..6207ced066
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-header-popover-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-header-popover-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-header-popover-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..5f31b8710f
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-header-popover-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-header-popover-ios-ltr-Mobile-Safari-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-header-popover-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..e1edcd5c83
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-header-popover-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-header-popover-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-header-popover-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..e18b4fd4ab
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-header-popover-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-header-popover-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-header-popover-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..b2ef25ee32
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-header-popover-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-header-popover-ios-rtl-Mobile-Safari-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-header-popover-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..bed21ab10a
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-header-popover-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-header-popover-md-ltr-Mobile-Chrome-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-header-popover-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..5a78d7cd85
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-header-popover-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-header-popover-md-ltr-Mobile-Firefox-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-header-popover-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..ec65fb5e0f
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-header-popover-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-header-popover-md-ltr-Mobile-Safari-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-header-popover-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..13f85eab44
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-header-popover-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-header-popover-md-rtl-Mobile-Chrome-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-header-popover-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..a50878a509
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-header-popover-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-header-popover-md-rtl-Mobile-Firefox-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-header-popover-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..2458bfe813
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-header-popover-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-header-popover-md-rtl-Mobile-Safari-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-header-popover-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..feffeb5bca
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-header-popover-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-popover-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-popover-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..dcf7985a4f
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-popover-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-popover-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-popover-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..15c083b14c
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-popover-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-popover-ios-ltr-Mobile-Safari-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-popover-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..dfde44c964
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-popover-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-popover-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-popover-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..f458e88097
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-popover-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-popover-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-popover-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..b1d9ab6d10
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-popover-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-popover-ios-rtl-Mobile-Safari-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-popover-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..727878ff53
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-popover-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-popover-md-ltr-Mobile-Chrome-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-popover-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..1a5c64b307
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-popover-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-popover-md-ltr-Mobile-Firefox-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-popover-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..7a5bffd0ab
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-popover-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-popover-md-ltr-Mobile-Safari-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-popover-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..0e8dbe9ef2
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-popover-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-popover-md-rtl-Mobile-Chrome-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-popover-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..fbe84e4c86
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-popover-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-popover-md-rtl-Mobile-Firefox-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-popover-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..0e2a736a2d
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-popover-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-popover-md-rtl-Mobile-Safari-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-popover-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..be7af4c8ef
Binary files /dev/null and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-popover-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/dismissOnSelect/e2e.ts b/core/src/components/popover/test/dismissOnSelect/e2e.ts
deleted file mode 100644
index 7c28dac0ff..0000000000
--- a/core/src/components/popover/test/dismissOnSelect/e2e.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('should not dismiss a popover when clicking a hover trigger', async () => {
-  const page = await newE2EPage({ url: `/src/components/popover/test/dismissOnSelect?ionic:_testing=true` });
-
-  const POPOVER_CLASS = 'hover-trigger-popover';
-  const TRIGGER_ID = 'hover-trigger';
-  const screenshotCompares = [];
-
-  await page.click(`#${TRIGGER_ID}`);
-
-  await page.waitForSelector(`.${POPOVER_CLASS}`);
-  const popover = await page.find(`.${POPOVER_CLASS}`);
-  await popover.waitForVisible();
-
-  await page.hover('#more-hover-trigger');
-  await page.click('#more-hover-trigger');
-
-  const isVisible = await popover.isVisible();
-  expect(isVisible).toBe(true);
-
-  screenshotCompares.push(await page.compareScreenshot());
-
-  for (const screenshotCompare of screenshotCompares) {
-    expect(screenshotCompare).toMatchScreenshot();
-  }
-});
-
-test('should not dismiss a popover when clicking a click trigger', async () => {
-  const page = await newE2EPage({ url: `/src/components/popover/test/dismissOnSelect?ionic:_testing=true` });
-
-  const POPOVER_CLASS = 'click-trigger-popover';
-  const TRIGGER_ID = 'click-trigger';
-  const screenshotCompares = [];
-
-  await page.click(`#${TRIGGER_ID}`);
-
-  await page.waitForSelector(`.${POPOVER_CLASS}`);
-  const popover = await page.find(`.${POPOVER_CLASS}`);
-  await popover.waitForVisible();
-
-  await page.hover('#more-click-trigger');
-  await page.click('#more-click-trigger');
-
-  const isVisible = await popover.isVisible();
-  expect(isVisible).toBe(true);
-
-  screenshotCompares.push(await page.compareScreenshot());
-
-  for (const screenshotCompare of screenshotCompares) {
-    expect(screenshotCompare).toMatchScreenshot();
-  }
-});
diff --git a/core/src/components/popover/test/dismissOnSelect/index.html b/core/src/components/popover/test/dismissOnSelect/index.html
index 40c04c7225..38ad40288e 100644
--- a/core/src/components/popover/test/dismissOnSelect/index.html
+++ b/core/src/components/popover/test/dismissOnSelect/index.html
@@ -14,16 +14,16 @@
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
   </head>
   <style>
-    .grid {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      grid-row-gap: 20px;
-      grid-column-gap: 20px;
-
-      padding: 200px;
-    }
-    .grid-item {
-      margin: 0 auto;
+    @media (min-width: 768px) {
+      .grid {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        grid-row-gap: 20px;
+        grid-column-gap: 20px;
+      }
+      .grid-item {
+        margin: 0 auto;
+      }
     }
     h2 {
       font-size: 12px;
diff --git a/core/src/components/popover/test/dismissOnSelect/popover.e2e.ts b/core/src/components/popover/test/dismissOnSelect/popover.e2e.ts
new file mode 100644
index 0000000000..b6e3cf83c5
--- /dev/null
+++ b/core/src/components/popover/test/dismissOnSelect/popover.e2e.ts
@@ -0,0 +1,46 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+import { openPopover } from '../test.utils';
+
+test.describe('popover: dismissOnSelect', async () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/src/components/popover/test/dismissOnSelect');
+  });
+
+  test('should not dismiss a popover when clicking a hover trigger', async ({ page }) => {
+    const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
+
+    await openPopover(page, 'hover-trigger');
+    const popover = page.locator('.hover-trigger-popover');
+    const hoverTrigger = page.locator('#more-hover-trigger');
+
+    await hoverTrigger.hover();
+    await ionPopoverDidPresent.next(); // wait for hover popover to open
+    await hoverTrigger.click();
+
+    // ensure parent popover is still open
+    expect(popover).toBeVisible();
+  });
+
+  test('should not dismiss a popover when clicking a click trigger', async ({ page, browserName }) => {
+    // TODO FW-1486
+    test.skip(
+      browserName === 'firefox',
+      'Parent popover disappears when click trigger is clicked. Cannot replicate locally. Needs further investigation.'
+    );
+
+    const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
+
+    await openPopover(page, 'click-trigger');
+    const popover = page.locator('.click-trigger-popover');
+    const clickTrigger = page.locator('#more-click-trigger');
+
+    await clickTrigger.hover();
+    await clickTrigger.click();
+    await ionPopoverDidPresent.next(); // wait for click popover to open
+
+    // ensure parent popover is still open
+    expect(popover).toBeVisible();
+  });
+});
diff --git a/core/src/components/popover/test/inline/e2e.ts b/core/src/components/popover/test/inline/e2e.ts
deleted file mode 100644
index 3a534d6b99..0000000000
--- a/core/src/components/popover/test/inline/e2e.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('popover: inline, isOpen and event props', async () => {
-  const page = await newE2EPage({ url: '/src/components/popover/test/inline?ionic:_testing=true' });
-  const screenshotCompares = [];
-
-  await page.click('ion-button#props');
-  await page.waitForSelector('ion-popover');
-
-  let popover = await page.find('ion-popover');
-
-  expect(popover).not.toBe(null);
-  await popover.waitForVisible();
-
-  screenshotCompares.push(await page.compareScreenshot());
-
-  await popover.callMethod('dismiss');
-  await popover.waitForNotVisible();
-
-  screenshotCompares.push(await page.compareScreenshot('dismiss'));
-
-  popover = await page.find('ion-popover');
-
-  await page.click('ion-button#props');
-  await page.waitForSelector('ion-popover');
-
-  const popoverAgain = await page.find('ion-popover');
-
-  expect(popoverAgain).not.toBe(null);
-  await popoverAgain.waitForVisible();
-
-  screenshotCompares.push(await page.compareScreenshot());
-
-  for (const screenshotCompare of screenshotCompares) {
-    expect(screenshotCompare).toMatchScreenshot();
-  }
-});
-
-test('popover: inline, present method', async () => {
-  const page = await newE2EPage({ url: '/src/components/popover/test/inline?ionic:_testing=true' });
-  const screenshotCompares = [];
-
-  await page.click('ion-button#method');
-  await page.waitForSelector('ion-popover');
-
-  let popover = await page.find('ion-popover');
-
-  expect(popover).not.toBe(null);
-  await popover.waitForVisible();
-
-  screenshotCompares.push(await page.compareScreenshot());
-
-  await popover.callMethod('dismiss');
-  await popover.waitForNotVisible();
-
-  screenshotCompares.push(await page.compareScreenshot('dismiss'));
-
-  popover = await page.find('ion-popover');
-
-  await page.click('ion-button#method');
-  await page.waitForSelector('ion-popover');
-
-  const popoverAgain = await page.find('ion-popover');
-
-  expect(popoverAgain).not.toBe(null);
-  await popoverAgain.waitForVisible();
-
-  screenshotCompares.push(await page.compareScreenshot());
-
-  for (const screenshotCompare of screenshotCompares) {
-    expect(screenshotCompare).toMatchScreenshot();
-  }
-});
diff --git a/core/src/components/popover/test/inline/popover.e2e.ts b/core/src/components/popover/test/inline/popover.e2e.ts
new file mode 100644
index 0000000000..ae04ce7b5a
--- /dev/null
+++ b/core/src/components/popover/test/inline/popover.e2e.ts
@@ -0,0 +1,30 @@
+import { expect } from '@playwright/test';
+import type { E2EPage } from '@utils/test/playwright';
+import { test } from '@utils/test/playwright';
+
+import { closePopover, openPopover } from '../test.utils';
+
+test.describe('popover: inline', async () => {
+  test('should open using isOpen and event props', async ({ page }) => {
+    await testPopover(page, 'props');
+  });
+
+  test('should open using present method', async ({ page }) => {
+    await testPopover(page, 'method');
+  });
+});
+
+const testPopover = async (page: E2EPage, buttonID: string) => {
+  await page.goto('/src/components/popover/test/inline');
+  const popover = page.locator('ion-popover');
+
+  await openPopover(page, buttonID);
+  expect(popover).toBeVisible();
+
+  await closePopover(page);
+  expect(popover).not.toBeVisible();
+
+  // ensure popover can be opened multiple times
+  await openPopover(page, buttonID);
+  expect(popover).toBeVisible();
+};
diff --git a/core/src/components/popover/test/isOpen/e2e.ts b/core/src/components/popover/test/isOpen/e2e.ts
deleted file mode 100644
index 2d23c08cf7..0000000000
--- a/core/src/components/popover/test/isOpen/e2e.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('should open the popover', async () => {
-  const page = await newE2EPage({ url: '/src/components/popover/test/isOpen?ionic:_testing=true' });
-
-  const screenshotCompares = [];
-
-  const trigger = await page.find('#default');
-  trigger.click();
-
-  await page.waitForSelector('ion-popover');
-  const popover = await page.find('ion-popover');
-  await popover.waitForVisible();
-
-  screenshotCompares.push(await page.compareScreenshot());
-
-  for (const screenshotCompare of screenshotCompares) {
-    expect(screenshotCompare).toMatchScreenshot();
-  }
-});
-
-test('should open the popover then close after a timeout', async () => {
-  const page = await newE2EPage({ url: '/src/components/popover/test/isOpen?ionic:_testing=true' });
-
-  const screenshotCompares = [];
-
-  const ionPopoverDidDismiss = await page.spyOnEvent('ionPopoverDidDismiss');
-
-  const trigger = await page.find('#timeout');
-  trigger.click();
-
-  await page.waitForSelector('ion-popover');
-  const popover = await page.find('ion-popover');
-  await popover.waitForVisible();
-
-  screenshotCompares.push(await page.compareScreenshot());
-
-  await ionPopoverDidDismiss.next();
-
-  await popover.waitForNotVisible();
-
-  screenshotCompares.push(await page.compareScreenshot());
-
-  for (const screenshotCompare of screenshotCompares) {
-    expect(screenshotCompare).toMatchScreenshot();
-  }
-});
diff --git a/core/src/components/popover/test/nested/e2e.ts b/core/src/components/popover/test/nested/e2e.ts
deleted file mode 100644
index 324119ae7b..0000000000
--- a/core/src/components/popover/test/nested/e2e.ts
+++ /dev/null
@@ -1,180 +0,0 @@
-import type { E2EPage } from '@stencil/core/testing';
-import { newE2EPage } from '@stencil/core/testing';
-
-describe('nested popovers', () => {
-  let page: E2EPage;
-
-  beforeEach(async () => {
-    page = await newE2EPage({ url: '/src/components/popover/test/nested?ionic:_testing=true' });
-  });
-
-  test('nested popover should render correctly', async () => {
-    const screenshotCompares = [];
-
-    const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
-
-    await page.click('#first-trigger');
-
-    await ionPopoverDidPresent.next();
-
-    const parentPopover = await page.find('.parent-popover');
-    expect(parentPopover).not.toHaveClass('overlay-hidden');
-
-    await page.click('#open-with-popover');
-
-    await ionPopoverDidPresent.next();
-
-    const nestedPopover = await page.find('.child-popover-one');
-    expect(nestedPopover).not.toHaveClass('overlay-hidden');
-
-    screenshotCompares.push(await page.compareScreenshot());
-
-    for (const screenshotCompare of screenshotCompares) {
-      expect(screenshotCompare).toMatchScreenshot();
-    }
-  });
-
-  test('nested popover should dismiss when clicking backdrop', async () => {
-    const screenshotCompares = [];
-
-    const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
-    const ionPopoverDidDismiss = await page.spyOnEvent('ionPopoverDidDismiss');
-
-    await page.click('#first-trigger');
-
-    await ionPopoverDidPresent.next();
-
-    const parentPopover = await page.find('.parent-popover');
-    expect(parentPopover).not.toHaveClass('overlay-hidden');
-
-    await page.click('#open-with-popover');
-
-    await ionPopoverDidPresent.next();
-
-    const nestedPopover = await page.find('.child-popover-one');
-    expect(nestedPopover).not.toHaveClass('overlay-hidden');
-
-    screenshotCompares.push(await page.compareScreenshot());
-
-    const backdrop = await page.find('.parent-popover >>> ion-backdrop');
-    await backdrop.click();
-
-    await ionPopoverDidDismiss.next();
-
-    const nestedPopoverAgain = await page.find('.child-popover-one');
-    expect(nestedPopoverAgain).toHaveClass('overlay-hidden');
-
-    screenshotCompares.push(await page.compareScreenshot());
-
-    for (const screenshotCompare of screenshotCompares) {
-      expect(screenshotCompare).toMatchScreenshot();
-    }
-  });
-
-  test('nested popover should be interactive', async () => {
-    const screenshotCompares = [];
-
-    const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
-
-    await page.click('#first-trigger');
-
-    await ionPopoverDidPresent.next();
-
-    await page.click('#share-popover');
-
-    await ionPopoverDidPresent.next();
-
-    await page.click('#share-other-popover');
-
-    await ionPopoverDidPresent.next();
-
-    const nestedPopover = await page.find('.child-popover-three');
-    expect(nestedPopover).not.toHaveClass('overlay-hidden');
-
-    screenshotCompares.push(await page.compareScreenshot());
-
-    for (const screenshotCompare of screenshotCompares) {
-      expect(screenshotCompare).toMatchScreenshot();
-    }
-  });
-
-  test('clicking backdrop should dismiss multiple levels of popover', async () => {
-    const screenshotCompares = [];
-
-    const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
-    const ionPopoverDidDismiss = await page.spyOnEvent('ionPopoverDidDismiss');
-
-    await page.click('#first-trigger');
-
-    await ionPopoverDidPresent.next();
-
-    await page.click('#share-popover');
-
-    await ionPopoverDidPresent.next();
-
-    await page.click('#share-other-popover');
-
-    await ionPopoverDidPresent.next();
-
-    const backdrop = await page.find('.parent-popover >>> ion-backdrop');
-    await backdrop.click();
-
-    await ionPopoverDidDismiss.next();
-
-    const nestedPopoverOne = await page.find('.child-popover-one');
-    expect(nestedPopoverOne).toHaveClass('overlay-hidden');
-
-    const nestedPopoverTwo = await page.find('.child-popover-three');
-    expect(nestedPopoverTwo).toHaveClass('overlay-hidden');
-
-    screenshotCompares.push(await page.compareScreenshot());
-
-    for (const screenshotCompare of screenshotCompares) {
-      expect(screenshotCompare).toMatchScreenshot();
-    }
-  });
-
-  test('should dismiss sibling nested popover when another sibling popover is opened', async () => {
-    const screenshotCompares = [];
-
-    const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
-    const ionPopoverDidDismiss = await page.spyOnEvent('ionPopoverDidDismiss');
-
-    await page.click('#first-trigger');
-
-    await ionPopoverDidPresent.next();
-
-    await page.click('#open-with-popover');
-
-    await ionPopoverDidPresent.next();
-
-    const openWithPopover = await page.find('.child-popover-one');
-    expect(openWithPopover).not.toHaveClass('overlay-hidden');
-
-    await page.click('#share-popover');
-
-    await ionPopoverDidPresent.next();
-    await ionPopoverDidDismiss.next();
-
-    const openWithPopoverAgain = await page.find('.child-popover-one');
-    const sharePopover = await page.find('.child-popover-two');
-    expect(openWithPopoverAgain).toHaveClass('overlay-hidden');
-    expect(sharePopover).not.toHaveClass('overlay-hidden');
-
-    screenshotCompares.push(await page.compareScreenshot());
-
-    const backdrop = await page.find('.parent-popover >>> ion-backdrop');
-    await backdrop.click();
-
-    await ionPopoverDidDismiss.next();
-
-    const nestedPopoverAgain = await page.find('.child-popover-one');
-    expect(nestedPopoverAgain).toHaveClass('overlay-hidden');
-
-    screenshotCompares.push(await page.compareScreenshot());
-
-    for (const screenshotCompare of screenshotCompares) {
-      expect(screenshotCompare).toMatchScreenshot();
-    }
-  });
-});
diff --git a/core/src/components/popover/test/nested/index.html b/core/src/components/popover/test/nested/index.html
index d8e3fba38d..f8d727e0d1 100644
--- a/core/src/components/popover/test/nested/index.html
+++ b/core/src/components/popover/test/nested/index.html
@@ -48,7 +48,7 @@
             <ion-button id="first-trigger">
               <ion-icon name="ellipsis-horizontal"></ion-icon>
             </ion-button>
-            <ion-popover animated="true" trigger="first-trigger" side="end" class="parent-popover">
+            <ion-popover alignment="start" animated="true" trigger="first-trigger" side="end" class="parent-popover">
               <ion-content>
                 <ion-list lines="none">
                   <ion-item button detail="false">
@@ -64,6 +64,7 @@
                     trigger="open-with-popover"
                     side="end"
                     class="child-popover-one"
+                    alignment="start"
                   >
                     <ion-list lines="none">
                       <ion-item button detail="false">
@@ -120,6 +121,7 @@
                     trigger="share-popover"
                     side="end"
                     class="child-popover-two"
+                    alignment="start"
                   >
                     <ion-list lines="none">
                       <ion-item button detail="false">
diff --git a/core/src/components/popover/test/nested/popover.e2e.ts b/core/src/components/popover/test/nested/popover.e2e.ts
new file mode 100644
index 0000000000..ca14fca12b
--- /dev/null
+++ b/core/src/components/popover/test/nested/popover.e2e.ts
@@ -0,0 +1,109 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('popover: nested', async () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/src/components/popover/test/nested');
+  });
+
+  test('should render correctly', async ({ page }) => {
+    const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
+
+    await page.click('#first-trigger');
+    await ionPopoverDidPresent.next();
+
+    const parentPopover = page.locator('.parent-popover');
+    expect(parentPopover).not.toHaveClass(/overlay-hidden/);
+
+    // note: alignment="start" is needed on popovers so all buttons are on-screen in iOS mode
+    // otherwise this one goes off the top of the screen and tests hang/fail
+    await page.click('#open-with-popover');
+    await ionPopoverDidPresent.next();
+
+    const nestedPopover = page.locator('.child-popover-one');
+    expect(nestedPopover).not.toHaveClass(/overlay-hidden/);
+
+    await page.setIonViewport();
+    expect(await page.screenshot()).toMatchSnapshot(`popover-nested-${page.getSnapshotSettings()}.png`);
+  });
+
+  test('should dismiss when clicking backdrop', async ({ page }) => {
+    const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
+    const ionPopoverDidDismiss = await page.spyOnEvent('ionPopoverDidDismiss');
+
+    await page.click('#first-trigger');
+    await ionPopoverDidPresent.next();
+    await page.click('#open-with-popover');
+    await ionPopoverDidPresent.next();
+
+    const backdrop = page.locator('.parent-popover ion-backdrop');
+    await backdrop.click({ position: { x: 5, y: 5 } });
+    await ionPopoverDidDismiss.next();
+
+    const nestedPopover = await page.locator('.child-popover-one');
+    expect(nestedPopover).toHaveClass(/overlay-hidden/);
+  });
+
+  test('should render multiple levels of nesting correctly', async ({ page }) => {
+    const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
+
+    await page.click('#first-trigger');
+    await ionPopoverDidPresent.next();
+
+    await page.click('#share-popover');
+    await ionPopoverDidPresent.next();
+
+    await page.click('#share-other-popover');
+    await ionPopoverDidPresent.next();
+
+    const nestedPopover = page.locator('.child-popover-three');
+    expect(nestedPopover).not.toHaveClass(/overlay-hidden/);
+
+    await page.setIonViewport();
+    expect(await page.screenshot()).toMatchSnapshot(`popover-nested-multiple-${page.getSnapshotSettings()}.png`);
+  });
+
+  test('clicking backdrop should dismiss multiple levels of popover', async ({ page }) => {
+    const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
+    const ionPopoverDidDismiss = await page.spyOnEvent('ionPopoverDidDismiss');
+
+    await page.click('#first-trigger');
+    await ionPopoverDidPresent.next();
+
+    await page.click('#share-popover');
+    await ionPopoverDidPresent.next();
+
+    await page.click('#share-other-popover');
+    await ionPopoverDidPresent.next();
+
+    const backdrop = page.locator('.parent-popover ion-backdrop');
+    await backdrop.click({ position: { x: 5, y: 5 } });
+    await ionPopoverDidDismiss.next();
+
+    const nestedPopoverOne = page.locator('.child-popover-one');
+    expect(nestedPopoverOne).toHaveClass(/overlay-hidden/);
+
+    const nestedPopoverTwo = page.locator('.child-popover-three');
+    expect(nestedPopoverTwo).toHaveClass(/overlay-hidden/);
+  });
+
+  test('should dismiss sibling nested popover when another sibling popover is opened', async ({ page }) => {
+    const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
+    const ionPopoverDidDismiss = await page.spyOnEvent('ionPopoverDidDismiss');
+
+    await page.click('#first-trigger');
+    await ionPopoverDidPresent.next();
+
+    await page.click('#open-with-popover');
+    await ionPopoverDidPresent.next();
+
+    await page.click('#share-popover');
+    await ionPopoverDidPresent.next();
+    await ionPopoverDidDismiss.next();
+
+    const openWithPopover = page.locator('.child-popover-one');
+    const sharePopover = page.locator('.child-popover-two');
+    expect(openWithPopover).toHaveClass(/overlay-hidden/);
+    expect(sharePopover).not.toHaveClass(/overlay-hidden/);
+  });
+});
diff --git a/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..89d7f32e35
Binary files /dev/null and b/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..245b40ddfd
Binary files /dev/null and b/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-ios-ltr-Mobile-Safari-linux.png b/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..d62fcd137f
Binary files /dev/null and b/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..7255cb3662
Binary files /dev/null and b/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..2b6e64a47b
Binary files /dev/null and b/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-ios-rtl-Mobile-Safari-linux.png b/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..b6c392a223
Binary files /dev/null and b/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-md-ltr-Mobile-Chrome-linux.png b/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..efe3a1bbb0
Binary files /dev/null and b/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-md-ltr-Mobile-Firefox-linux.png b/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..ead489ed68
Binary files /dev/null and b/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-md-ltr-Mobile-Safari-linux.png b/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..3e8c67fce8
Binary files /dev/null and b/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-md-rtl-Mobile-Chrome-linux.png b/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..1c685c724a
Binary files /dev/null and b/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-md-rtl-Mobile-Firefox-linux.png b/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..01643bf0b1
Binary files /dev/null and b/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-md-rtl-Mobile-Safari-linux.png b/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..62e0747526
Binary files /dev/null and b/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-multiple-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-multiple-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..7932c8efe9
Binary files /dev/null and b/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-multiple-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-multiple-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-multiple-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..7ecec0d068
Binary files /dev/null and b/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-multiple-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-multiple-ios-ltr-Mobile-Safari-linux.png b/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-multiple-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..cbf7c9d09d
Binary files /dev/null and b/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-multiple-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-multiple-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-multiple-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..5eb6c29f33
Binary files /dev/null and b/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-multiple-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-multiple-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-multiple-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..23a07c3a8f
Binary files /dev/null and b/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-multiple-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-multiple-ios-rtl-Mobile-Safari-linux.png b/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-multiple-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..8431926960
Binary files /dev/null and b/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-multiple-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-multiple-md-ltr-Mobile-Chrome-linux.png b/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-multiple-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..4c580811c7
Binary files /dev/null and b/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-multiple-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-multiple-md-ltr-Mobile-Firefox-linux.png b/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-multiple-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..f5f2a872f6
Binary files /dev/null and b/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-multiple-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-multiple-md-ltr-Mobile-Safari-linux.png b/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-multiple-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..b850f4d8ce
Binary files /dev/null and b/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-multiple-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-multiple-md-rtl-Mobile-Chrome-linux.png b/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-multiple-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..97ceee8b62
Binary files /dev/null and b/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-multiple-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-multiple-md-rtl-Mobile-Firefox-linux.png b/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-multiple-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..38554a2cbe
Binary files /dev/null and b/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-multiple-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-multiple-md-rtl-Mobile-Safari-linux.png b/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-multiple-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..21b3b7ed59
Binary files /dev/null and b/core/src/components/popover/test/nested/popover.e2e.ts-snapshots/popover-nested-multiple-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/position/e2e.ts b/core/src/components/popover/test/position/e2e.ts
deleted file mode 100644
index 6dc681d06c..0000000000
--- a/core/src/components/popover/test/position/e2e.ts
+++ /dev/null
@@ -1,231 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('popover: position - side: top, alignment: start', async () => {
-  await testPopover('top', 'start');
-});
-
-test('popover: position - side: top, alignment: center', async () => {
-  await testPopover('top', 'center');
-});
-
-test('popover: position - side: top, alignment: end', async () => {
-  await testPopover('top', 'end');
-});
-
-test('popover: position - side: right, alignment: start', async () => {
-  await testPopover('right', 'start');
-});
-
-test('popover: position - side: right, alignment: center', async () => {
-  await testPopover('right', 'center');
-});
-
-test('popover: position - side: right, alignment: end', async () => {
-  await testPopover('right', 'end');
-});
-
-test('popover: position - side: bottom, alignment: start', async () => {
-  await testPopover('bottom', 'start');
-});
-
-test('popover: position - side: bottom, alignment: center', async () => {
-  await testPopover('bottom', 'center');
-});
-
-test('popover: position - side: bottom, alignment: end', async () => {
-  await testPopover('bottom', 'end');
-});
-
-test('popover: position - side: left, alignment: start', async () => {
-  await testPopover('left', 'start');
-});
-
-test('popover: position - side: left, alignment: center', async () => {
-  await testPopover('left', 'center');
-});
-
-test('popover: position - side: left, alignment: end', async () => {
-  await testPopover('left', 'end');
-});
-
-test('popover: position - side: start, alignment: start', async () => {
-  await testPopover('start', 'start');
-});
-
-test('popover: position - side: start, alignment: center', async () => {
-  await testPopover('start', 'center');
-});
-
-test('popover: position - side: start, alignment: end', async () => {
-  await testPopover('start', 'end');
-});
-
-test('popover: position - side: end, alignment: start', async () => {
-  await testPopover('end', 'start');
-});
-
-test('popover: position - side: end, alignment: center', async () => {
-  await testPopover('end', 'center');
-});
-
-test('popover: position - side: end, alignment: end', async () => {
-  await testPopover('end', 'end');
-});
-
-test('popover: position - side: start, alignment: start - rtl', async () => {
-  await testPopover('start', 'start', true);
-});
-
-test('popover: position - side: start, alignment: center - rtl', async () => {
-  await testPopover('start', 'center', true);
-});
-
-test('popover: position - side: start, alignment: end - rtl', async () => {
-  await testPopover('start', 'end', true);
-});
-
-test('popover: position - side: end, alignment: start - rtl', async () => {
-  await testPopover('end', 'start', true);
-});
-
-test('popover: position - side: end, alignment: center - rtl', async () => {
-  await testPopover('end', 'center', true);
-});
-
-test('popover: position - side: end, alignment: end - rtl', async () => {
-  await testPopover('end', 'end', true);
-});
-
-const testPopover = async (side: string, alignment: string, isRTL = false) => {
-  const rtl = isRTL ? '&rtl=true' : '';
-  const page = await newE2EPage({ url: `/src/components/popover/test/position?ionic:_testing=true${rtl}` });
-
-  const POPOVER_CLASS = `${side}-${alignment}-popover`;
-  const TRIGGER_ID = `${side}-${alignment}`;
-  const screenshotCompares = [];
-
-  const trigger = await page.find(`#${TRIGGER_ID}`);
-
-  await page.evaluate((POPOVER_TRIGGER_ID) => {
-    const popoverTrigger = document.querySelector(`#${POPOVER_TRIGGER_ID}`);
-    popoverTrigger?.scrollIntoView({ block: 'center' });
-  }, TRIGGER_ID);
-
-  trigger.click();
-
-  await page.waitForSelector(`.${POPOVER_CLASS}`);
-  const popover = await page.find(`.${POPOVER_CLASS}`);
-  await popover.waitForVisible();
-
-  await testSideAndAlign(page, POPOVER_CLASS, TRIGGER_ID, side, alignment, isRTL);
-
-  screenshotCompares.push(await page.compareScreenshot());
-
-  for (const screenshotCompare of screenshotCompares) {
-    expect(screenshotCompare).toMatchScreenshot();
-  }
-};
-
-const testSideAndAlign = async (page, popoverClass, triggerID, side, alignment, isRTL = false) => {
-  const popoverContentHandle = await page.evaluateHandle(
-    `document.querySelector('.${popoverClass}').shadowRoot.querySelector('.popover-content')`
-  );
-  const popoverBbox = await popoverContentHandle.boundingBox();
-
-  const triggerHandler = await page.$(`#${triggerID}`);
-  const triggerBbox = await triggerHandler.boundingBox();
-
-  const actualX = popoverBbox.x;
-  const actualY = popoverBbox.y;
-
-  let expectedX;
-  let expectedY;
-
-  switch (side) {
-    case 'top':
-      expectedX = triggerBbox.x;
-      expectedY = triggerBbox.y - popoverBbox.height;
-      break;
-    case 'right':
-      expectedX = triggerBbox.x + triggerBbox.width;
-      expectedY = triggerBbox.y;
-      break;
-    case 'bottom':
-      expectedX = triggerBbox.x;
-      expectedY = triggerBbox.y + triggerBbox.height;
-      break;
-    case 'left':
-      expectedX = triggerBbox.x - popoverBbox.width;
-      expectedY = triggerBbox.y;
-      break;
-    case 'start':
-      expectedX = isRTL ? triggerBbox.x + triggerBbox.width : triggerBbox.x - popoverBbox.width;
-      expectedY = triggerBbox.y;
-      break;
-    case 'end':
-      expectedX = isRTL ? triggerBbox.x - popoverBbox.width : triggerBbox.x + triggerBbox.width;
-      expectedY = triggerBbox.y;
-      break;
-    default:
-      break;
-  }
-
-  switch (alignment) {
-    case 'center':
-      const centerAlign = getCenterAlign(side, triggerBbox, popoverBbox);
-      expectedX += centerAlign.left;
-      expectedY += centerAlign.top;
-      break;
-    case 'end':
-      const endAlign = getEndAlign(side, triggerBbox, popoverBbox);
-      expectedX += endAlign.left;
-      expectedY += endAlign.top;
-      break;
-    case 'start':
-    default:
-      break;
-  }
-
-  expect(Math.abs(actualX - expectedX)).toBeLessThanOrEqual(2);
-  expect(Math.abs(actualY - expectedY)).toBeLessThanOrEqual(2);
-};
-
-const getEndAlign = (side, triggerBbox, popoverBbox) => {
-  switch (side) {
-    case 'start':
-    case 'end':
-    case 'left':
-    case 'right':
-      return {
-        top: -(popoverBbox.height - triggerBbox.height),
-        left: 0,
-      };
-    case 'top':
-    case 'bottom':
-    default:
-      return {
-        top: 0,
-        left: -(popoverBbox.width - triggerBbox.width),
-      };
-  }
-};
-
-const getCenterAlign = (side, triggerBbox, popoverBbox) => {
-  switch (side) {
-    case 'start':
-    case 'end':
-    case 'left':
-    case 'right':
-      return {
-        top: -(popoverBbox.height / 2 - triggerBbox.height / 2),
-        left: 0,
-      };
-    case 'top':
-    case 'bottom':
-    default:
-      return {
-        top: 0,
-        left: -(popoverBbox.width / 2 - triggerBbox.width / 2),
-      };
-  }
-};
diff --git a/core/src/components/popover/test/position/index.html b/core/src/components/popover/test/position/index.html
index 05a409da82..1ac0cc95e9 100644
--- a/core/src/components/popover/test/position/index.html
+++ b/core/src/components/popover/test/position/index.html
@@ -14,16 +14,18 @@
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
   </head>
   <style>
+    ion-app > ion-content {
+      --background: #dddddd;
+    }
     .grid {
       display: grid;
       grid-template-columns: 1fr 1fr 1fr;
-      grid-row-gap: 20px;
+      grid-row-gap: 40px;
       grid-column-gap: 20px;
-
-      padding: 200px;
     }
     .grid-item {
       margin: 0 auto;
+      text-align: center;
     }
     h2 {
       font-size: 12px;
@@ -64,7 +66,7 @@
               trigger="top-start"
               side="top"
               alignment="start"
-              show-backdrop="true"
+              show-backdrop="false"
             >
               <list-page></list-page>
             </ion-popover>
@@ -78,7 +80,7 @@
               trigger="top-center"
               side="top"
               alignment="center"
-              show-backdrop="true"
+              show-backdrop="false"
             >
               <list-page></list-page>
             </ion-popover>
@@ -87,7 +89,7 @@
           <div class="grid-item">
             <h2>Top, End</h2>
             <ion-button id="top-end">Click to Open</ion-button>
-            <ion-popover class="top-end-popover" trigger="top-end" side="top" alignment="end" show-backdrop="true">
+            <ion-popover class="top-end-popover" trigger="top-end" side="top" alignment="end" show-backdrop="false">
               <list-page></list-page>
             </ion-popover>
           </div>
@@ -100,7 +102,7 @@
               trigger="right-start"
               side="right"
               alignment="start"
-              show-backdrop="true"
+              show-backdrop="false"
             >
               <list-page></list-page>
             </ion-popover>
@@ -114,7 +116,7 @@
               trigger="right-center"
               side="right"
               alignment="center"
-              show-backdrop="true"
+              show-backdrop="false"
             >
               <list-page></list-page>
             </ion-popover>
@@ -128,7 +130,7 @@
               trigger="right-end"
               side="right"
               alignment="end"
-              show-backdrop="true"
+              show-backdrop="false"
             >
               <list-page></list-page>
             </ion-popover>
@@ -142,7 +144,7 @@
               trigger="bottom-start"
               side="bottom"
               alignment="start"
-              show-backdrop="true"
+              show-backdrop="false"
             >
               <list-page></list-page>
             </ion-popover>
@@ -156,7 +158,7 @@
               trigger="bottom-center"
               side="bottom"
               alignment="center"
-              show-backdrop="true"
+              show-backdrop="false"
             >
               <list-page></list-page>
             </ion-popover>
@@ -170,7 +172,7 @@
               trigger="bottom-end"
               side="bottom"
               alignment="end"
-              show-backdrop="true"
+              show-backdrop="false"
             >
               <list-page></list-page>
             </ion-popover>
@@ -184,7 +186,7 @@
               trigger="left-start"
               side="left"
               alignment="start"
-              show-backdrop="true"
+              show-backdrop="false"
             >
               <list-page></list-page>
             </ion-popover>
@@ -198,7 +200,7 @@
               trigger="left-center"
               side="left"
               alignment="center"
-              show-backdrop="true"
+              show-backdrop="false"
             >
               <list-page></list-page>
             </ion-popover>
@@ -207,7 +209,7 @@
           <div class="grid-item">
             <h2>Left, End</h2>
             <ion-button id="left-end">Click to Open</ion-button>
-            <ion-popover class="left-end-popover" trigger="left-end" side="left" alignment="end" show-backdrop="true">
+            <ion-popover class="left-end-popover" trigger="left-end" side="left" alignment="end" show-backdrop="false">
               <list-page></list-page>
             </ion-popover>
           </div>
@@ -220,7 +222,7 @@
               trigger="start-start"
               side="start"
               alignment="start"
-              show-backdrop="true"
+              show-backdrop="false"
             >
               <list-page></list-page>
             </ion-popover>
@@ -234,7 +236,7 @@
               trigger="start-center"
               side="start"
               alignment="center"
-              show-backdrop="true"
+              show-backdrop="false"
             >
               <list-page></list-page>
             </ion-popover>
@@ -248,7 +250,7 @@
               trigger="start-end"
               side="start"
               alignment="end"
-              show-backdrop="true"
+              show-backdrop="false"
             >
               <list-page></list-page>
             </ion-popover>
@@ -262,7 +264,7 @@
               trigger="end-start"
               side="end"
               alignment="start"
-              show-backdrop="true"
+              show-backdrop="false"
             >
               <list-page></list-page>
             </ion-popover>
@@ -276,7 +278,7 @@
               trigger="end-center"
               side="end"
               alignment="center"
-              show-backdrop="true"
+              show-backdrop="false"
             >
               <list-page></list-page>
             </ion-popover>
@@ -285,7 +287,7 @@
           <div class="grid-item">
             <h2>End, End</h2>
             <ion-button id="end-end">Click to Open</ion-button>
-            <ion-popover class="end-end-popover" trigger="end-end" side="end" alignment="end" show-backdrop="true">
+            <ion-popover class="end-end-popover" trigger="end-end" side="end" alignment="end" show-backdrop="false">
               <list-page></list-page>
             </ion-popover>
           </div>
diff --git a/core/src/components/popover/test/position/popover.e2e.ts b/core/src/components/popover/test/position/popover.e2e.ts
new file mode 100644
index 0000000000..e1e38b0335
--- /dev/null
+++ b/core/src/components/popover/test/position/popover.e2e.ts
@@ -0,0 +1,27 @@
+import { expect } from '@playwright/test';
+import { test, Viewports } from '@utils/test/playwright';
+
+import { openPopover } from '../test.utils';
+
+test.describe('popover: position', async () => {
+  /**
+   * The popovers have showBackdrop=false so we can open all of them at once
+   * and massively cut down on screenshots taken. The content has its own
+   * backdrop so you can still see the popovers.
+   */
+  test('should not have visual regressions', async ({ page }) => {
+    await page.goto('/src/components/popover/test/position');
+    await page.setViewportSize(Viewports.tablet.portrait); // avoid extra-long viewport screenshots
+
+    const sides = ['top', 'right', 'bottom', 'left', 'start', 'end'];
+    const alignments = ['start', 'center', 'end'];
+
+    for (const side of sides) {
+      for (const alignment of alignments) {
+        await openPopover(page, `${side}-${alignment}`, true);
+      }
+    }
+
+    expect(await page.screenshot()).toMatchSnapshot(`popover-position-${page.getSnapshotSettings()}.png`);
+  });
+});
diff --git a/core/src/components/popover/test/position/popover.e2e.ts-snapshots/popover-position-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/popover/test/position/popover.e2e.ts-snapshots/popover-position-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..47f631ecd6
Binary files /dev/null and b/core/src/components/popover/test/position/popover.e2e.ts-snapshots/popover-position-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/position/popover.e2e.ts-snapshots/popover-position-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/popover/test/position/popover.e2e.ts-snapshots/popover-position-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..e7abc0e401
Binary files /dev/null and b/core/src/components/popover/test/position/popover.e2e.ts-snapshots/popover-position-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/position/popover.e2e.ts-snapshots/popover-position-ios-ltr-Mobile-Safari-linux.png b/core/src/components/popover/test/position/popover.e2e.ts-snapshots/popover-position-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..ad189d8935
Binary files /dev/null and b/core/src/components/popover/test/position/popover.e2e.ts-snapshots/popover-position-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/position/popover.e2e.ts-snapshots/popover-position-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/popover/test/position/popover.e2e.ts-snapshots/popover-position-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..6e9b2505fa
Binary files /dev/null and b/core/src/components/popover/test/position/popover.e2e.ts-snapshots/popover-position-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/position/popover.e2e.ts-snapshots/popover-position-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/popover/test/position/popover.e2e.ts-snapshots/popover-position-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..a9a5135c18
Binary files /dev/null and b/core/src/components/popover/test/position/popover.e2e.ts-snapshots/popover-position-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/position/popover.e2e.ts-snapshots/popover-position-ios-rtl-Mobile-Safari-linux.png b/core/src/components/popover/test/position/popover.e2e.ts-snapshots/popover-position-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..af7a84464d
Binary files /dev/null and b/core/src/components/popover/test/position/popover.e2e.ts-snapshots/popover-position-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/position/popover.e2e.ts-snapshots/popover-position-md-ltr-Mobile-Chrome-linux.png b/core/src/components/popover/test/position/popover.e2e.ts-snapshots/popover-position-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..5bcd2b762c
Binary files /dev/null and b/core/src/components/popover/test/position/popover.e2e.ts-snapshots/popover-position-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/position/popover.e2e.ts-snapshots/popover-position-md-ltr-Mobile-Firefox-linux.png b/core/src/components/popover/test/position/popover.e2e.ts-snapshots/popover-position-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..4ec8f2398d
Binary files /dev/null and b/core/src/components/popover/test/position/popover.e2e.ts-snapshots/popover-position-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/position/popover.e2e.ts-snapshots/popover-position-md-ltr-Mobile-Safari-linux.png b/core/src/components/popover/test/position/popover.e2e.ts-snapshots/popover-position-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..60681544e4
Binary files /dev/null and b/core/src/components/popover/test/position/popover.e2e.ts-snapshots/popover-position-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/position/popover.e2e.ts-snapshots/popover-position-md-rtl-Mobile-Chrome-linux.png b/core/src/components/popover/test/position/popover.e2e.ts-snapshots/popover-position-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..9e08ce3438
Binary files /dev/null and b/core/src/components/popover/test/position/popover.e2e.ts-snapshots/popover-position-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/position/popover.e2e.ts-snapshots/popover-position-md-rtl-Mobile-Firefox-linux.png b/core/src/components/popover/test/position/popover.e2e.ts-snapshots/popover-position-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..ec5e07bfdf
Binary files /dev/null and b/core/src/components/popover/test/position/popover.e2e.ts-snapshots/popover-position-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/position/popover.e2e.ts-snapshots/popover-position-md-rtl-Mobile-Safari-linux.png b/core/src/components/popover/test/position/popover.e2e.ts-snapshots/popover-position-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..b4f7f591b3
Binary files /dev/null and b/core/src/components/popover/test/position/popover.e2e.ts-snapshots/popover-position-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/reference/e2e.ts b/core/src/components/popover/test/reference/e2e.ts
deleted file mode 100644
index c18686863f..0000000000
--- a/core/src/components/popover/test/reference/e2e.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('should position popover relative to mouse click', async () => {
-  const page = await newE2EPage({ url: '/src/components/popover/test/reference?ionic:_testing=true' });
-
-  const screenshotCompares = [];
-
-  const triggerHandler = await page.$('#event-trigger');
-  const triggerBbox = await triggerHandler.boundingBox();
-
-  await page.mouse.click(triggerBbox.x, triggerBbox.y);
-
-  await page.waitForSelector('.event-popover');
-  const popover = await page.find('.event-popover');
-  await popover.waitForVisible();
-
-  const popoverContentHandle = await page.evaluateHandle(
-    `document.querySelector('.event-popover').shadowRoot.querySelector('.popover-content')`
-  );
-  const popoverBbox = await popoverContentHandle.boundingBox();
-
-  // Give us some margin for subpixel rounding
-  expect(Math.abs(popoverBbox.x - triggerBbox.x)).toBeLessThanOrEqual(2);
-  expect(Math.abs(popoverBbox.y - triggerBbox.y)).toBeLessThanOrEqual(2);
-
-  screenshotCompares.push(await page.compareScreenshot());
-
-  for (const screenshotCompare of screenshotCompares) {
-    expect(screenshotCompare).toMatchScreenshot();
-  }
-});
-
-test('should position popover relative to trigger', async () => {
-  const page = await newE2EPage({ url: '/src/components/popover/test/reference?ionic:_testing=true' });
-
-  const screenshotCompares = [];
-
-  const triggerHandler = await page.$('#trigger-trigger');
-  const triggerBbox = await triggerHandler.boundingBox();
-
-  await page.mouse.click(triggerBbox.x + 5, triggerBbox.y + 5);
-
-  await page.waitForSelector('.trigger-popover');
-  const popover = await page.find('.trigger-popover');
-  await popover.waitForVisible();
-
-  const popoverContentHandle = await page.evaluateHandle(
-    `document.querySelector('.trigger-popover').shadowRoot.querySelector('.popover-content')`
-  );
-  const popoverBbox = await popoverContentHandle.boundingBox();
-
-  // Give us some margin for subpixel rounding
-  const triggerBottom = triggerBbox.y + triggerBbox.height;
-  expect(Math.abs(popoverBbox.x - triggerBbox.x)).toBeLessThanOrEqual(2);
-  expect(Math.abs(popoverBbox.y - triggerBottom)).toBeLessThanOrEqual(2);
-
-  screenshotCompares.push(await page.compareScreenshot());
-
-  for (const screenshotCompare of screenshotCompares) {
-    expect(screenshotCompare).toMatchScreenshot();
-  }
-});
diff --git a/core/src/components/popover/test/reference/popover.e2e.ts b/core/src/components/popover/test/reference/popover.e2e.ts
new file mode 100644
index 0000000000..eca41d05be
--- /dev/null
+++ b/core/src/components/popover/test/reference/popover.e2e.ts
@@ -0,0 +1,13 @@
+import { test } from '@utils/test/playwright';
+
+import { screenshotPopover } from '../test.utils';
+
+test.describe('popover: reference', async () => {
+  test('should position popover relative to mouse click', async ({ page }) => {
+    await screenshotPopover(page, 'event-trigger', 'reference');
+  });
+
+  test('should position popover relative to trigger', async ({ page }) => {
+    await screenshotPopover(page, 'trigger-trigger', 'reference');
+  });
+});
diff --git a/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-event-trigger-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-event-trigger-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..b64203a61f
Binary files /dev/null and b/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-event-trigger-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-event-trigger-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-event-trigger-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..975d9cd2d5
Binary files /dev/null and b/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-event-trigger-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-event-trigger-ios-ltr-Mobile-Safari-linux.png b/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-event-trigger-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..71d8aac71e
Binary files /dev/null and b/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-event-trigger-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-event-trigger-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-event-trigger-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..0e50ffe8dc
Binary files /dev/null and b/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-event-trigger-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-event-trigger-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-event-trigger-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..124399d0e9
Binary files /dev/null and b/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-event-trigger-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-event-trigger-ios-rtl-Mobile-Safari-linux.png b/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-event-trigger-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..da09213ea6
Binary files /dev/null and b/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-event-trigger-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-event-trigger-md-ltr-Mobile-Chrome-linux.png b/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-event-trigger-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..e0a11c5f01
Binary files /dev/null and b/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-event-trigger-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-event-trigger-md-ltr-Mobile-Firefox-linux.png b/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-event-trigger-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..fb5fe23072
Binary files /dev/null and b/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-event-trigger-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-event-trigger-md-ltr-Mobile-Safari-linux.png b/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-event-trigger-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..a39703fe0c
Binary files /dev/null and b/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-event-trigger-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-event-trigger-md-rtl-Mobile-Chrome-linux.png b/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-event-trigger-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..af2ef917c6
Binary files /dev/null and b/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-event-trigger-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-event-trigger-md-rtl-Mobile-Firefox-linux.png b/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-event-trigger-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..e491445162
Binary files /dev/null and b/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-event-trigger-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-event-trigger-md-rtl-Mobile-Safari-linux.png b/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-event-trigger-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..5b60d808e3
Binary files /dev/null and b/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-event-trigger-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-trigger-trigger-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-trigger-trigger-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..fb3af4afb0
Binary files /dev/null and b/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-trigger-trigger-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-trigger-trigger-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-trigger-trigger-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..1139220eb1
Binary files /dev/null and b/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-trigger-trigger-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-trigger-trigger-ios-ltr-Mobile-Safari-linux.png b/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-trigger-trigger-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..253f1da03e
Binary files /dev/null and b/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-trigger-trigger-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-trigger-trigger-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-trigger-trigger-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..3b54e49f37
Binary files /dev/null and b/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-trigger-trigger-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-trigger-trigger-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-trigger-trigger-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..ebd0363100
Binary files /dev/null and b/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-trigger-trigger-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-trigger-trigger-ios-rtl-Mobile-Safari-linux.png b/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-trigger-trigger-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..446c8974c1
Binary files /dev/null and b/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-trigger-trigger-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-trigger-trigger-md-ltr-Mobile-Chrome-linux.png b/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-trigger-trigger-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..720cb2e402
Binary files /dev/null and b/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-trigger-trigger-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-trigger-trigger-md-ltr-Mobile-Firefox-linux.png b/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-trigger-trigger-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..0dd6afcc70
Binary files /dev/null and b/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-trigger-trigger-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-trigger-trigger-md-ltr-Mobile-Safari-linux.png b/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-trigger-trigger-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..7b9f23686f
Binary files /dev/null and b/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-trigger-trigger-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-trigger-trigger-md-rtl-Mobile-Chrome-linux.png b/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-trigger-trigger-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..86f4edc986
Binary files /dev/null and b/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-trigger-trigger-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-trigger-trigger-md-rtl-Mobile-Firefox-linux.png b/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-trigger-trigger-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..7f5a92565d
Binary files /dev/null and b/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-trigger-trigger-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-trigger-trigger-md-rtl-Mobile-Safari-linux.png b/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-trigger-trigger-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..6282b962d9
Binary files /dev/null and b/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-trigger-trigger-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/size/e2e.ts b/core/src/components/popover/test/size/e2e.ts
deleted file mode 100644
index 5a0a195db6..0000000000
--- a/core/src/components/popover/test/size/e2e.ts
+++ /dev/null
@@ -1,109 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('should calculate popover width automatically', async () => {
-  const page = await newE2EPage({ url: '/src/components/popover/test/size?ionic:_testing=true' });
-
-  const screenshotCompares = [];
-
-  const trigger = await page.find('#auto-trigger');
-  trigger.click();
-
-  await page.waitForSelector('.auto-popover');
-  const popover = await page.find('.auto-popover');
-  await popover.waitForVisible();
-
-  const triggerHandler = await page.$('#auto-trigger');
-  const popoverContentHandle = await page.evaluateHandle(
-    `document.querySelector('.auto-popover').shadowRoot.querySelector('.popover-content')`
-  );
-  const triggerBbox = await triggerHandler.boundingBox();
-  const popoverBbox = await popoverContentHandle.boundingBox();
-  expect(popoverBbox.width).not.toEqual(triggerBbox.width);
-
-  screenshotCompares.push(await page.compareScreenshot());
-
-  for (const screenshotCompare of screenshotCompares) {
-    expect(screenshotCompare).toMatchScreenshot();
-  }
-});
-
-test('should calculate popover width based on trigger width', async () => {
-  const page = await newE2EPage({ url: '/src/components/popover/test/size?ionic:_testing=true' });
-
-  const screenshotCompares = [];
-
-  const trigger = await page.find('#cover-trigger');
-  trigger.click();
-
-  await page.waitForSelector('.cover-popover');
-  const popover = await page.find('.cover-popover');
-  await popover.waitForVisible();
-
-  const triggerHandler = await page.$('#cover-trigger');
-  const popoverContentHandle = await page.evaluateHandle(
-    `document.querySelector('.cover-popover').shadowRoot.querySelector('.popover-content')`
-  );
-  const triggerBbox = await triggerHandler.boundingBox();
-  const popoverBbox = await popoverContentHandle.boundingBox();
-  expect(popoverBbox.width).toEqual(triggerBbox.width);
-
-  screenshotCompares.push(await page.compareScreenshot());
-
-  for (const screenshotCompare of screenshotCompares) {
-    expect(screenshotCompare).toMatchScreenshot();
-  }
-});
-
-test('should calculate popover width based on event width', async () => {
-  const page = await newE2EPage({ url: '/src/components/popover/test/size?ionic:_testing=true' });
-
-  const screenshotCompares = [];
-
-  const trigger = await page.find('#event-trigger');
-  trigger.click();
-
-  await page.waitForSelector('.event-popover');
-  const popover = await page.find('.event-popover');
-  await popover.waitForVisible();
-
-  const triggerHandler = await page.$('#event-trigger');
-  const popoverContentHandle = await page.evaluateHandle(
-    `document.querySelector('.event-popover').shadowRoot.querySelector('.popover-content')`
-  );
-  const triggerBbox = await triggerHandler.boundingBox();
-  const popoverBbox = await popoverContentHandle.boundingBox();
-  expect(popoverBbox.width).toEqual(triggerBbox.width);
-
-  screenshotCompares.push(await page.compareScreenshot());
-
-  for (const screenshotCompare of screenshotCompares) {
-    expect(screenshotCompare).toMatchScreenshot();
-  }
-});
-
-test('should not calculate popover width with no trigger or event', async () => {
-  const page = await newE2EPage({ url: '/src/components/popover/test/size?ionic:_testing=true' });
-
-  const screenshotCompares = [];
-
-  const trigger = await page.find('#no-event-trigger');
-  trigger.click();
-
-  await page.waitForSelector('.no-event-popover');
-  const popover = await page.find('.no-event-popover');
-  await popover.waitForVisible();
-
-  const triggerHandler = await page.$('#no-event-trigger');
-  const popoverContentHandle = await page.evaluateHandle(
-    `document.querySelector('.no-event-popover').shadowRoot.querySelector('.popover-content')`
-  );
-  const triggerBbox = await triggerHandler.boundingBox();
-  const popoverBbox = await popoverContentHandle.boundingBox();
-  expect(popoverBbox.width).not.toEqual(triggerBbox.width);
-
-  screenshotCompares.push(await page.compareScreenshot());
-
-  for (const screenshotCompare of screenshotCompares) {
-    expect(screenshotCompare).toMatchScreenshot();
-  }
-});
diff --git a/core/src/components/popover/test/size/index.html b/core/src/components/popover/test/size/index.html
index ca14e193d4..7085ffb8b5 100644
--- a/core/src/components/popover/test/size/index.html
+++ b/core/src/components/popover/test/size/index.html
@@ -16,13 +16,17 @@
       window.popoverController = popoverController;
     </script>
     <style>
+      ion-app > ion-content {
+        --background: #dddddd;
+      }
       .grid {
         display: grid;
-        grid-template-columns: repeat(4, 1fr);
-        grid-row-gap: 20px;
+        grid-template-columns: repeat(2, 1fr);
+        grid-template-rows: repeat(2, 1fr);
+        grid-row-gap: 170px;
         grid-column-gap: 20px;
 
-        padding: 200px;
+        padding: 100px;
       }
       .grid-item {
         margin: 0 auto;
@@ -48,28 +52,30 @@
 
       <ion-content class="ion-padding">
         <div class="grid">
-          <div class="grid-item">
-            <h2>Auto</h2>
-            <ion-button id="auto-trigger">Trigger</ion-button>
-            <ion-popover class="auto-popover" trigger="auto-trigger">
-              <ion-content class="ion-padding"> My really really really really long content </ion-content>
-            </ion-popover>
-          </div>
           <div class="grid-item">
             <h2>Cover</h2>
             <ion-button id="cover-trigger">Trigger</ion-button>
-            <ion-popover class="cover-popover" trigger="cover-trigger" size="cover">
+            <ion-popover show-backdrop="false" class="cover-popover" trigger="cover-trigger" size="cover">
               <ion-content class="ion-padding"> My really really really really long content </ion-content>
             </ion-popover>
           </div>
           <div class="grid-item">
             <h2>With Event</h2>
-            <ion-button id="event-trigger" onclick="openPopover('event-popover', event)">Trigger</ion-button>
+            <ion-button id="event-trigger" onclick="openPopover('event-popover', event, 'false')">Trigger</ion-button>
           </div>
 
+          <div class="grid-item">
+            <h2>Auto</h2>
+            <ion-button id="auto-trigger">Trigger</ion-button>
+            <ion-popover show-backdrop="false" class="auto-popover" trigger="auto-trigger">
+              <ion-content class="ion-padding"> My really really really really long content </ion-content>
+            </ion-popover>
+          </div>
           <div class="grid-item">
             <h2>No Event</h2>
-            <ion-button id="no-event-trigger" onclick="openPopover('no-event-popover')">Trigger</ion-button>
+            <ion-button id="no-event-trigger" onclick="openPopover('no-event-popover', null, 'true')"
+              >Trigger</ion-button
+            >
           </div>
         </div>
       </ion-content>
@@ -92,12 +98,13 @@
 
       customElements.define('popover-component', PopoverComponent);
 
-      const openPopover = async (cssClass, ev) => {
+      const openPopover = async (cssClass, ev, showBackdrop) => {
         const popover = await popoverController.create({
           component: 'popover-component',
           cssClass,
           size: 'cover',
           event: ev,
+          showBackdrop,
         });
         await popover.present();
       };
diff --git a/core/src/components/popover/test/size/popover.e2e.ts b/core/src/components/popover/test/size/popover.e2e.ts
new file mode 100644
index 0000000000..9526792246
--- /dev/null
+++ b/core/src/components/popover/test/size/popover.e2e.ts
@@ -0,0 +1,27 @@
+import { expect } from '@playwright/test';
+import { test, Viewports } from '@utils/test/playwright';
+
+import { openPopover, screenshotPopover } from '../test.utils';
+
+test.describe('popover: size', async () => {
+  /**
+   * The popovers have showBackdrop=false so we can open most of them at once
+   * and massively cut down on screenshots taken. The content has its own
+   * backdrop so you can still see the popovers.
+   */
+  test('should calculate popover width based on sizing method', async ({ page }) => {
+    await page.goto('/src/components/popover/test/size');
+    await page.setViewportSize(Viewports.tablet.portrait); // avoid popovers overlapping
+
+    const sameTimeTriggers = ['auto-trigger', 'cover-trigger', 'event-trigger'];
+
+    for (const trigger of sameTimeTriggers) {
+      await openPopover(page, trigger, true);
+    }
+
+    expect(await page.screenshot()).toMatchSnapshot(`popover-size-${page.getSnapshotSettings()}.png`);
+
+    // test this one separately since it would overlap others
+    await screenshotPopover(page, 'no-event-trigger', 'size');
+  });
+});
diff --git a/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..c41babf515
Binary files /dev/null and b/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..7f8502d934
Binary files /dev/null and b/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-ios-ltr-Mobile-Safari-linux.png b/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..67a2be2876
Binary files /dev/null and b/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..0cd89b8c84
Binary files /dev/null and b/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..8036cb5c97
Binary files /dev/null and b/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-ios-rtl-Mobile-Safari-linux.png b/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..46023a4cbe
Binary files /dev/null and b/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-md-ltr-Mobile-Chrome-linux.png b/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..dfb531239d
Binary files /dev/null and b/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-md-ltr-Mobile-Firefox-linux.png b/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..61e0e436db
Binary files /dev/null and b/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-md-ltr-Mobile-Safari-linux.png b/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..c560962357
Binary files /dev/null and b/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-md-rtl-Mobile-Chrome-linux.png b/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..cc22e02268
Binary files /dev/null and b/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-md-rtl-Mobile-Firefox-linux.png b/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..837db665e0
Binary files /dev/null and b/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-md-rtl-Mobile-Safari-linux.png b/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..8b7f44c9f5
Binary files /dev/null and b/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-no-event-trigger-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-no-event-trigger-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..3806042949
Binary files /dev/null and b/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-no-event-trigger-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-no-event-trigger-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-no-event-trigger-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..43295a267f
Binary files /dev/null and b/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-no-event-trigger-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-no-event-trigger-ios-ltr-Mobile-Safari-linux.png b/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-no-event-trigger-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..f2e36bcc82
Binary files /dev/null and b/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-no-event-trigger-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-no-event-trigger-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-no-event-trigger-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..47cfeb83c8
Binary files /dev/null and b/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-no-event-trigger-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-no-event-trigger-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-no-event-trigger-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..4035c2ac2f
Binary files /dev/null and b/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-no-event-trigger-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-no-event-trigger-ios-rtl-Mobile-Safari-linux.png b/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-no-event-trigger-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..8afbc0c062
Binary files /dev/null and b/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-no-event-trigger-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-no-event-trigger-md-ltr-Mobile-Chrome-linux.png b/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-no-event-trigger-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..b4ffe33036
Binary files /dev/null and b/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-no-event-trigger-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-no-event-trigger-md-ltr-Mobile-Firefox-linux.png b/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-no-event-trigger-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..91e898b495
Binary files /dev/null and b/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-no-event-trigger-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-no-event-trigger-md-ltr-Mobile-Safari-linux.png b/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-no-event-trigger-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..39ef3b78bf
Binary files /dev/null and b/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-no-event-trigger-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-no-event-trigger-md-rtl-Mobile-Chrome-linux.png b/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-no-event-trigger-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..587e58dcaa
Binary files /dev/null and b/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-no-event-trigger-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-no-event-trigger-md-rtl-Mobile-Firefox-linux.png b/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-no-event-trigger-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..af50bffaff
Binary files /dev/null and b/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-no-event-trigger-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-no-event-trigger-md-rtl-Mobile-Safari-linux.png b/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-no-event-trigger-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..ff2664ea8b
Binary files /dev/null and b/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-no-event-trigger-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/standalone/e2e.ts b/core/src/components/popover/test/standalone/e2e.ts
deleted file mode 100644
index af4f2866e3..0000000000
--- a/core/src/components/popover/test/standalone/e2e.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { testPopover } from '../test.utils';
-
-const DIRECTORY = 'standalone';
-
-test('popover: standalone', async () => {
-  await testPopover(DIRECTORY, '#basic-popover');
-});
diff --git a/core/src/components/popover/test/standalone/popover.e2e.ts b/core/src/components/popover/test/standalone/popover.e2e.ts
new file mode 100644
index 0000000000..bbb2724300
--- /dev/null
+++ b/core/src/components/popover/test/standalone/popover.e2e.ts
@@ -0,0 +1,9 @@
+import { test } from '@utils/test/playwright';
+
+import { screenshotPopover } from '../test.utils';
+
+test.describe('popover: standalone', async () => {
+  test('should render correctly', async ({ page }) => {
+    await screenshotPopover(page, 'basic-popover', 'standalone');
+  });
+});
diff --git a/core/src/components/popover/test/standalone/popover.e2e.ts-snapshots/popover-standalone-basic-popover-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/popover/test/standalone/popover.e2e.ts-snapshots/popover-standalone-basic-popover-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..f0b8e05832
Binary files /dev/null and b/core/src/components/popover/test/standalone/popover.e2e.ts-snapshots/popover-standalone-basic-popover-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/standalone/popover.e2e.ts-snapshots/popover-standalone-basic-popover-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/popover/test/standalone/popover.e2e.ts-snapshots/popover-standalone-basic-popover-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..cbdcc964d2
Binary files /dev/null and b/core/src/components/popover/test/standalone/popover.e2e.ts-snapshots/popover-standalone-basic-popover-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/standalone/popover.e2e.ts-snapshots/popover-standalone-basic-popover-ios-ltr-Mobile-Safari-linux.png b/core/src/components/popover/test/standalone/popover.e2e.ts-snapshots/popover-standalone-basic-popover-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..6d41d763ce
Binary files /dev/null and b/core/src/components/popover/test/standalone/popover.e2e.ts-snapshots/popover-standalone-basic-popover-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/standalone/popover.e2e.ts-snapshots/popover-standalone-basic-popover-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/popover/test/standalone/popover.e2e.ts-snapshots/popover-standalone-basic-popover-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..6e044fbcb1
Binary files /dev/null and b/core/src/components/popover/test/standalone/popover.e2e.ts-snapshots/popover-standalone-basic-popover-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/standalone/popover.e2e.ts-snapshots/popover-standalone-basic-popover-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/popover/test/standalone/popover.e2e.ts-snapshots/popover-standalone-basic-popover-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..879e4dc573
Binary files /dev/null and b/core/src/components/popover/test/standalone/popover.e2e.ts-snapshots/popover-standalone-basic-popover-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/standalone/popover.e2e.ts-snapshots/popover-standalone-basic-popover-ios-rtl-Mobile-Safari-linux.png b/core/src/components/popover/test/standalone/popover.e2e.ts-snapshots/popover-standalone-basic-popover-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..6344a8c80e
Binary files /dev/null and b/core/src/components/popover/test/standalone/popover.e2e.ts-snapshots/popover-standalone-basic-popover-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/standalone/popover.e2e.ts-snapshots/popover-standalone-basic-popover-md-ltr-Mobile-Chrome-linux.png b/core/src/components/popover/test/standalone/popover.e2e.ts-snapshots/popover-standalone-basic-popover-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..35ddf93a2b
Binary files /dev/null and b/core/src/components/popover/test/standalone/popover.e2e.ts-snapshots/popover-standalone-basic-popover-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/standalone/popover.e2e.ts-snapshots/popover-standalone-basic-popover-md-ltr-Mobile-Firefox-linux.png b/core/src/components/popover/test/standalone/popover.e2e.ts-snapshots/popover-standalone-basic-popover-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..3908f1861f
Binary files /dev/null and b/core/src/components/popover/test/standalone/popover.e2e.ts-snapshots/popover-standalone-basic-popover-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/standalone/popover.e2e.ts-snapshots/popover-standalone-basic-popover-md-ltr-Mobile-Safari-linux.png b/core/src/components/popover/test/standalone/popover.e2e.ts-snapshots/popover-standalone-basic-popover-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..e7cfd2a6d8
Binary files /dev/null and b/core/src/components/popover/test/standalone/popover.e2e.ts-snapshots/popover-standalone-basic-popover-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/standalone/popover.e2e.ts-snapshots/popover-standalone-basic-popover-md-rtl-Mobile-Chrome-linux.png b/core/src/components/popover/test/standalone/popover.e2e.ts-snapshots/popover-standalone-basic-popover-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..76f623ae4a
Binary files /dev/null and b/core/src/components/popover/test/standalone/popover.e2e.ts-snapshots/popover-standalone-basic-popover-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/standalone/popover.e2e.ts-snapshots/popover-standalone-basic-popover-md-rtl-Mobile-Firefox-linux.png b/core/src/components/popover/test/standalone/popover.e2e.ts-snapshots/popover-standalone-basic-popover-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..e7eea5f8ee
Binary files /dev/null and b/core/src/components/popover/test/standalone/popover.e2e.ts-snapshots/popover-standalone-basic-popover-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/standalone/popover.e2e.ts-snapshots/popover-standalone-basic-popover-md-rtl-Mobile-Safari-linux.png b/core/src/components/popover/test/standalone/popover.e2e.ts-snapshots/popover-standalone-basic-popover-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..afa2ac8d26
Binary files /dev/null and b/core/src/components/popover/test/standalone/popover.e2e.ts-snapshots/popover-standalone-basic-popover-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/test.utils.ts b/core/src/components/popover/test/test.utils.ts
index 77f453561b..1bbf821bf1 100644
--- a/core/src/components/popover/test/test.utils.ts
+++ b/core/src/components/popover/test/test.utils.ts
@@ -1,38 +1,40 @@
-import { newE2EPage } from '@stencil/core/testing';
-import { generateE2EUrl } from '@utils/test';
+import type { Locator } from '@playwright/test';
+import { expect } from '@playwright/test';
+import type { E2EPage } from '@utils/test/playwright';
 
-export const testPopover = async (type: string, selector: string, expectUnmount = true, rtl = false) => {
-  try {
-    const pageUrl = generateE2EUrl('popover', type, rtl);
+export const openPopover = async (page: E2EPage, buttonID: string, useEvalClick = false) => {
+  const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
 
-    const page = await newE2EPage({
-      url: pageUrl,
-    });
+  const trigger = page.locator(`#${buttonID}`);
+  await trigger.evaluate((el: HTMLElement) => el.scrollIntoView({ block: 'center' }));
 
-    const screenshotCompares = [];
-
-    await page.click(selector);
-    await page.waitForSelector(selector);
-
-    let popover = await page.find('ion-popover');
-    await popover.waitForVisible();
-
-    screenshotCompares.push(await page.compareScreenshot());
-
-    await popover.callMethod('dismiss');
-    await popover.waitForNotVisible();
-
-    screenshotCompares.push(await page.compareScreenshot('dismiss'));
-
-    if (expectUnmount) {
-      popover = await page.find('ion-popover');
-      expect(popover).toBeNull();
-    }
-
-    for (const screenshotCompare of screenshotCompares) {
-      expect(screenshotCompare).toMatchScreenshot();
-    }
-  } catch (err) {
-    throw err;
+  /**
+   * Some tests aim to have many popovers open at once. When clicking a locator, Playwright
+   * will simply click on that coordinate, which may instead trigger the backdrop for the
+   * previous popover. Rather than set backdropDismiss=false on all popovers, we can call
+   * the click method on the button directly to avoid this behavior.
+   */
+  if (useEvalClick) {
+    trigger.evaluate((el: HTMLElement) => el.click());
+  } else {
+    await trigger.click();
   }
+
+  await ionPopoverDidPresent.next();
+};
+
+export const closePopover = async (page: E2EPage, popover?: Locator) => {
+  const ionPopoverDidDismiss = await page.spyOnEvent('ionPopoverDidDismiss');
+  popover = popover || page.locator('ion-popover');
+
+  await popover.evaluate((el: HTMLIonPopoverElement) => el.dismiss());
+  await ionPopoverDidDismiss.next();
+};
+
+export const screenshotPopover = async (page: E2EPage, buttonID: string, testName: string) => {
+  await page.goto(`src/components/popover/test/${testName}`);
+
+  await openPopover(page, buttonID);
+  await page.setIonViewport();
+  expect(await page.screenshot()).toMatchSnapshot(`popover-${testName}-${buttonID}-${page.getSnapshotSettings()}.png`);
 };
diff --git a/core/src/components/popover/test/trigger/e2e.ts b/core/src/components/popover/test/trigger/e2e.ts
deleted file mode 100644
index e0d99a8aab..0000000000
--- a/core/src/components/popover/test/trigger/e2e.ts
+++ /dev/null
@@ -1,80 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('should open popover by left clicking on trigger', async () => {
-  const page = await newE2EPage({ url: '/src/components/popover/test/trigger?ionic:_testing=true' });
-
-  const screenshotCompares = [];
-
-  await page.click('#left-click-trigger');
-  await page.waitForSelector('.left-click-popover');
-
-  const popover = await page.find('.left-click-popover');
-  await popover.waitForVisible();
-
-  screenshotCompares.push(await page.compareScreenshot());
-
-  for (const screenshotCompare of screenshotCompares) {
-    expect(screenshotCompare).toMatchScreenshot();
-  }
-});
-
-test('should open popover by right clicking on trigger', async () => {
-  const page = await newE2EPage({ url: '/src/components/popover/test/trigger?ionic:_testing=true' });
-
-  const screenshotCompares = [];
-
-  await page.click('#right-click-trigger', { button: 'right' });
-  await page.waitForSelector('.right-click-popover');
-
-  const popover = await page.find('.right-click-popover');
-  await popover.waitForVisible();
-
-  screenshotCompares.push(await page.compareScreenshot());
-
-  for (const screenshotCompare of screenshotCompares) {
-    expect(screenshotCompare).toMatchScreenshot();
-  }
-});
-
-test('should open popover by hovering over trigger', async () => {
-  const page = await newE2EPage({ url: '/src/components/popover/test/trigger?ionic:_testing=true' });
-
-  const screenshotCompares = [];
-
-  const button = await page.$('#hover-trigger');
-  const bbox = await button.boundingBox();
-  await page.mouse.move(bbox.x + 5, bbox.y + 5);
-  await page.waitForSelector('.hover-popover');
-
-  const popover = await page.find('.hover-popover');
-  await popover.waitForVisible();
-
-  screenshotCompares.push(await page.compareScreenshot());
-
-  for (const screenshotCompare of screenshotCompares) {
-    expect(screenshotCompare).toMatchScreenshot();
-  }
-});
-
-test('should not close main popover with dismiss-on-select when clicking a trigger', async () => {
-  const page = await newE2EPage({ url: '/src/components/popover/test/trigger?ionic:_testing=true' });
-
-  const screenshotCompares = [];
-
-  await page.click('#nested-click-trigger');
-  await page.waitForSelector('.nested-click-popover');
-
-  const firstPopover = await page.find('.nested-click-popover');
-  await firstPopover.waitForVisible();
-
-  await page.click('#nested-click-trigger-two');
-
-  const secondPopover = await page.find('.nested-click-popover-two');
-  await secondPopover.waitForVisible();
-
-  screenshotCompares.push(await page.compareScreenshot());
-
-  for (const screenshotCompare of screenshotCompares) {
-    expect(screenshotCompare).toMatchScreenshot();
-  }
-});
diff --git a/core/src/components/popover/test/trigger/popover.e2e.ts b/core/src/components/popover/test/trigger/popover.e2e.ts
new file mode 100644
index 0000000000..836498acb7
--- /dev/null
+++ b/core/src/components/popover/test/trigger/popover.e2e.ts
@@ -0,0 +1,40 @@
+import { expect } from '@playwright/test';
+import type { E2EPage } from '@utils/test/playwright';
+import { test } from '@utils/test/playwright';
+
+import { openPopover } from '../test.utils';
+
+test.describe('popover: trigger', async () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/src/components/popover/test/trigger');
+  });
+
+  test('should open popover by left clicking on trigger', async ({ page }) => {
+    await openPopover(page, 'left-click-trigger');
+    await checkPopover(page, '.left-click-popover');
+  });
+
+  test('should open popover by right clicking on trigger', async ({ page }) => {
+    const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
+
+    await page.click('#right-click-trigger', { button: 'right' });
+    await ionPopoverDidPresent.next();
+
+    await checkPopover(page, '.right-click-popover');
+  });
+
+  test('should open popover by hovering over trigger', async ({ page }) => {
+    const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
+
+    const button = page.locator('#hover-trigger');
+    await button.hover();
+    await ionPopoverDidPresent.next();
+
+    await checkPopover(page, '.hover-popover');
+  });
+});
+
+const checkPopover = async (page: E2EPage, popoverSelector: string) => {
+  const popover = page.locator(popoverSelector);
+  expect(popover).toBeVisible();
+};