diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md
index 38e85dc9a4..6672ac0cd8 100644
--- a/.github/CONTRIBUTING.md
+++ b/.github/CONTRIBUTING.md
@@ -140,12 +140,13 @@ Before creating a pull request, please read our requirements that explains the m
 
 #### Modifying Documentation
 
-1. Locate the `readme.md` file in the component's directory.
-2. Modify the documentation **above** the line that says `<!-- Auto Generated Below -->` in this file.
-3. To update any of the auto generated documentation below that line, make the relevant changes in the following places:
-  - `Usage`: update the component's usage examples in the component's `usage/` directory
-  - `Properties`, `Events`, or `Methods`: update the component's TypeScript file (`*.tsx`)
-  - `CSS Custom Properties`: update the component's main Sass file (`*.scss`)
+- Changes to manually written documentation should be made in the `ionic-docs` repo: https://github.com/ionic-team/ionic-docs/tree/main/docs
+  - In your `ionic-docs` PR, please add a link back to the related `ionic-framework` PR.
+- Changes to auto generated documentation should be made in the `ionic-framework` repo. These can be done in the same PR as your fix or feature.
+  - Run `npm run build` and commit all updates to ensure your changes make it into the generated documentation.
+  - `Usage`: update the component's usage examples in the component's `usage/` directory.
+  - `Properties`, `Events`, or `Methods`: update the component's TypeScript file (`*.tsx`).
+  - `CSS Custom Properties`: update the component's main Sass file (`*.scss`).
 
 
 #### Modifying Tests
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index c02a4ffacf..de483aceb0 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -5,6 +5,7 @@
 Please check if your PR fulfills the following requirements:
 - [ ] Tests for the changes have been added (for bug fixes / features)
 - [ ] Docs have been reviewed and added / updated if needed (for bug fixes / features)
+  - Some docs updates need to be made in the `ionic-docs` repo, in a separate PR. See the [contributing guide](https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation) for details.
 - [ ] Build (`npm run build`) was run locally and any changes were pushed
 - [ ] Lint (`npm run lint`) has passed locally and any fixes were made for failures
 
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 99362719b5..c599bde1f8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.1.6](https://github.com/ionic-team/ionic-framework/compare/v6.1.5...v6.1.6) (2022-05-18)
+
+
+### Bug Fixes
+
+* **loading:** spinner now respects —spinner-color ([#25261](https://github.com/ionic-team/ionic-framework/issues/25261)) ([65f4c74](https://github.com/ionic-team/ionic-framework/commit/65f4c742e7a5e5756f6f72dd853e38e885f90385)), closes [#25180](https://github.com/ionic-team/ionic-framework/issues/25180)
+* **modal:** reset breakpoint to initial breakpoint on present ([#25246](https://github.com/ionic-team/ionic-framework/issues/25246)) ([2557bf3](https://github.com/ionic-team/ionic-framework/commit/2557bf3c3eed9e33e89e07a8d73489da8d81bee3)), closes [#25245](https://github.com/ionic-team/ionic-framework/issues/25245)
+* **scroll-assist:** touch end events continue to bubble on inputs ([#25282](https://github.com/ionic-team/ionic-framework/issues/25282)) ([780f16d](https://github.com/ionic-team/ionic-framework/commit/780f16d9e04ee5aaaf91bb7c6ef15c72cc8aeb45)), closes [#25229](https://github.com/ionic-team/ionic-framework/issues/25229)
+
+
+
+
+
 ## [6.1.5](https://github.com/ionic-team/ionic-framework/compare/v6.1.4...v6.1.5) (2022-05-11)
 
 
diff --git a/angular/CHANGELOG.md b/angular/CHANGELOG.md
index c410a58eb5..cd3f38f619 100644
--- a/angular/CHANGELOG.md
+++ b/angular/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.1.6](https://github.com/ionic-team/ionic/compare/v6.1.5...v6.1.6) (2022-05-18)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
 ## [6.1.5](https://github.com/ionic-team/ionic/compare/v6.1.4...v6.1.5) (2022-05-11)
 
 
diff --git a/angular/package-lock.json b/angular/package-lock.json
index 9b8af18f4d..4157deb853 100644
--- a/angular/package-lock.json
+++ b/angular/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/angular",
-  "version": "6.1.5",
+  "version": "6.1.6",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/angular",
-      "version": "6.1.5",
+      "version": "6.1.6",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^6.1.5",
+        "@ionic/core": "^6.1.6",
         "jsonc-parser": "^3.0.0",
         "tslib": "^2.0.0"
       },
@@ -1023,9 +1023,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "6.1.5",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.5.tgz",
-      "integrity": "sha512-YEpFheFDGV7lifbYNqctcPXRPqEOKiDy5KgSPriFzrrPUbwrv/tnXHZq7hFVPCMUYFBS9QJts4r5FOYTqAfvtw==",
+      "version": "6.1.6",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.6.tgz",
+      "integrity": "sha512-AsYGEHKVHy082RST3RBrIiOZX6VXNy6qYSYtf6TwOwmF/YV+/ASaB1TqVO/jP658ML106nNcjUM0fTkbm9UXRA==",
       "dependencies": {
         "@stencil/core": "^2.14.2",
         "ionicons": "^6.0.0",
@@ -7951,9 +7951,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "6.1.5",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.5.tgz",
-      "integrity": "sha512-YEpFheFDGV7lifbYNqctcPXRPqEOKiDy5KgSPriFzrrPUbwrv/tnXHZq7hFVPCMUYFBS9QJts4r5FOYTqAfvtw==",
+      "version": "6.1.6",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.6.tgz",
+      "integrity": "sha512-AsYGEHKVHy082RST3RBrIiOZX6VXNy6qYSYtf6TwOwmF/YV+/ASaB1TqVO/jP658ML106nNcjUM0fTkbm9UXRA==",
       "requires": {
         "@stencil/core": "^2.14.2",
         "ionicons": "^6.0.0",
diff --git a/angular/package.json b/angular/package.json
index ce780cc02c..c479c802e6 100644
--- a/angular/package.json
+++ b/angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular",
-  "version": "6.1.5",
+  "version": "6.1.6",
   "description": "Angular specific wrappers for @ionic/core",
   "keywords": [
     "ionic",
@@ -44,7 +44,7 @@
     "validate": "npm i && npm run lint && npm run test && npm run build"
   },
   "dependencies": {
-    "@ionic/core": "^6.1.5",
+    "@ionic/core": "^6.1.6",
     "jsonc-parser": "^3.0.0",
     "tslib": "^2.0.0"
   },
diff --git a/core/CHANGELOG.md b/core/CHANGELOG.md
index de0854b101..444a2f87e3 100644
--- a/core/CHANGELOG.md
+++ b/core/CHANGELOG.md
@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.1.6](https://github.com/ionic-team/ionic/compare/v6.1.5...v6.1.6) (2022-05-18)
+
+
+### Bug Fixes
+
+* **loading:** spinner now respects —spinner-color ([#25261](https://github.com/ionic-team/ionic/issues/25261)) ([65f4c74](https://github.com/ionic-team/ionic/commit/65f4c742e7a5e5756f6f72dd853e38e885f90385)), closes [#25180](https://github.com/ionic-team/ionic/issues/25180)
+* **modal:** reset breakpoint to initial breakpoint on present ([#25246](https://github.com/ionic-team/ionic/issues/25246)) ([2557bf3](https://github.com/ionic-team/ionic/commit/2557bf3c3eed9e33e89e07a8d73489da8d81bee3)), closes [#25245](https://github.com/ionic-team/ionic/issues/25245)
+* **scroll-assist:** touch end events continue to bubble on inputs ([#25282](https://github.com/ionic-team/ionic/issues/25282)) ([780f16d](https://github.com/ionic-team/ionic/commit/780f16d9e04ee5aaaf91bb7c6ef15c72cc8aeb45)), closes [#25229](https://github.com/ionic-team/ionic/issues/25229)
+
+
+
+
+
 ## [6.1.5](https://github.com/ionic-team/ionic/compare/v6.1.4...v6.1.5) (2022-05-11)
 
 
diff --git a/core/package-lock.json b/core/package-lock.json
index 08e6d49bb2..b3e7ee5cd7 100644
--- a/core/package-lock.json
+++ b/core/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@ionic/core",
-  "version": "6.1.5",
+  "version": "6.1.6",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/core",
-      "version": "6.1.5",
+      "version": "6.1.6",
       "license": "MIT",
       "dependencies": {
         "@stencil/core": "^2.14.2",
diff --git a/core/package.json b/core/package.json
index 4c6c22971f..9c0016b481 100644
--- a/core/package.json
+++ b/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "6.1.5",
+  "version": "6.1.6",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts
new file mode 100644
index 0000000000..961c6c8191
--- /dev/null
+++ b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts
@@ -0,0 +1,12 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('breadcrumbs: basic', () => {
+  test('should not have visual regressions', async ({ page }) => {
+    await page.goto(`/src/components/breadcrumbs/test/basic`);
+
+    await page.setIonViewport();
+
+    expect(await page.screenshot()).toMatchSnapshot(`breadcrumb-diff-${page.getSnapshotSettings()}.png`);
+  });
+});
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..c855d61700
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..0f19f9edd4
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..e56126419e
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..18022b3baf
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..b371aa94f0
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..8f1973ba43
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..e08dff40ee
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..4bd8cc098b
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..a762d9135a
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..03d28a6524
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..80fd7ad7a4
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..d3719d7a00
Binary files /dev/null and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/basic/e2e.ts b/core/src/components/breadcrumbs/test/basic/e2e.ts
deleted file mode 100644
index 91275fde08..0000000000
--- a/core/src/components/breadcrumbs/test/basic/e2e.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('breadcrumbs: basic', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/breadcrumbs/test/basic?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
-
-test('breadcrumbs: basic-rtl', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/breadcrumbs/test/basic?ionic:_testing=true&rtl=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
diff --git a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts
new file mode 100644
index 0000000000..76f7a7c913
--- /dev/null
+++ b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts
@@ -0,0 +1,12 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('breadcrumbs: collapsed', () => {
+  test('should not have visual regressions', async ({ page }) => {
+    await page.goto(`/src/components/breadcrumbs/test/collapsed`);
+
+    await page.setIonViewport();
+
+    expect(await page.screenshot()).toMatchSnapshot(`breadcrumb-collapsed-diff-${page.getSnapshotSettings()}.png`);
+  });
+});
diff --git a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..fef2cc9a35
Binary files /dev/null and b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..c21aca1574
Binary files /dev/null and b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..856b0093a1
Binary files /dev/null and b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..162ffc763f
Binary files /dev/null and b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..f4438cb3e7
Binary files /dev/null and b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..bfced02d10
Binary files /dev/null and b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..85b279a0d1
Binary files /dev/null and b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..7fcc459eb5
Binary files /dev/null and b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..423790c52a
Binary files /dev/null and b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..17af895e31
Binary files /dev/null and b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..290ab5ac1e
Binary files /dev/null and b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..909a163389
Binary files /dev/null and b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/collapsed/e2e.ts b/core/src/components/breadcrumbs/test/collapsed/e2e.ts
deleted file mode 100644
index 3fe6ddb24e..0000000000
--- a/core/src/components/breadcrumbs/test/collapsed/e2e.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('breadcrumbs: collapsed', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/breadcrumbs/test/collapsed?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
diff --git a/core/src/components/breadcrumbs/test/standalone/breadcrumbs.e2e.ts b/core/src/components/breadcrumbs/test/standalone/breadcrumbs.e2e.ts
new file mode 100644
index 0000000000..d4d0a6f61e
--- /dev/null
+++ b/core/src/components/breadcrumbs/test/standalone/breadcrumbs.e2e.ts
@@ -0,0 +1,12 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('breadcrumbs: standalone', () => {
+  test('should not have visual regressions', async ({ page }) => {
+    await page.goto(`/src/components/breadcrumbs/test/standalone`);
+
+    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot(
+      `breadcrumb-standalone-diff-${page.getSnapshotSettings()}.png`
+    );
+  });
+});
diff --git a/core/src/components/breadcrumbs/test/standalone/breadcrumbs.e2e.ts-snapshots/breadcrumb-standalone-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/standalone/breadcrumbs.e2e.ts-snapshots/breadcrumb-standalone-diff-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..2d3aa1a8c9
Binary files /dev/null and b/core/src/components/breadcrumbs/test/standalone/breadcrumbs.e2e.ts-snapshots/breadcrumb-standalone-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/standalone/breadcrumbs.e2e.ts-snapshots/breadcrumb-standalone-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/standalone/breadcrumbs.e2e.ts-snapshots/breadcrumb-standalone-diff-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..d3e3e19904
Binary files /dev/null and b/core/src/components/breadcrumbs/test/standalone/breadcrumbs.e2e.ts-snapshots/breadcrumb-standalone-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/standalone/breadcrumbs.e2e.ts-snapshots/breadcrumb-standalone-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/standalone/breadcrumbs.e2e.ts-snapshots/breadcrumb-standalone-diff-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..2a4fcc1fcd
Binary files /dev/null and b/core/src/components/breadcrumbs/test/standalone/breadcrumbs.e2e.ts-snapshots/breadcrumb-standalone-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/standalone/breadcrumbs.e2e.ts-snapshots/breadcrumb-standalone-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/standalone/breadcrumbs.e2e.ts-snapshots/breadcrumb-standalone-diff-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..a5cd606eda
Binary files /dev/null and b/core/src/components/breadcrumbs/test/standalone/breadcrumbs.e2e.ts-snapshots/breadcrumb-standalone-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/standalone/breadcrumbs.e2e.ts-snapshots/breadcrumb-standalone-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/standalone/breadcrumbs.e2e.ts-snapshots/breadcrumb-standalone-diff-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..d609b0e312
Binary files /dev/null and b/core/src/components/breadcrumbs/test/standalone/breadcrumbs.e2e.ts-snapshots/breadcrumb-standalone-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/standalone/breadcrumbs.e2e.ts-snapshots/breadcrumb-standalone-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/standalone/breadcrumbs.e2e.ts-snapshots/breadcrumb-standalone-diff-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..8468cac598
Binary files /dev/null and b/core/src/components/breadcrumbs/test/standalone/breadcrumbs.e2e.ts-snapshots/breadcrumb-standalone-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/standalone/breadcrumbs.e2e.ts-snapshots/breadcrumb-standalone-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/standalone/breadcrumbs.e2e.ts-snapshots/breadcrumb-standalone-diff-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..3047485c13
Binary files /dev/null and b/core/src/components/breadcrumbs/test/standalone/breadcrumbs.e2e.ts-snapshots/breadcrumb-standalone-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/standalone/breadcrumbs.e2e.ts-snapshots/breadcrumb-standalone-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/standalone/breadcrumbs.e2e.ts-snapshots/breadcrumb-standalone-diff-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..cd00ea3e6f
Binary files /dev/null and b/core/src/components/breadcrumbs/test/standalone/breadcrumbs.e2e.ts-snapshots/breadcrumb-standalone-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/standalone/breadcrumbs.e2e.ts-snapshots/breadcrumb-standalone-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/standalone/breadcrumbs.e2e.ts-snapshots/breadcrumb-standalone-diff-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..c20ed35366
Binary files /dev/null and b/core/src/components/breadcrumbs/test/standalone/breadcrumbs.e2e.ts-snapshots/breadcrumb-standalone-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/standalone/breadcrumbs.e2e.ts-snapshots/breadcrumb-standalone-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/standalone/breadcrumbs.e2e.ts-snapshots/breadcrumb-standalone-diff-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..cdb2c94428
Binary files /dev/null and b/core/src/components/breadcrumbs/test/standalone/breadcrumbs.e2e.ts-snapshots/breadcrumb-standalone-diff-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/standalone/breadcrumbs.e2e.ts-snapshots/breadcrumb-standalone-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/breadcrumbs/test/standalone/breadcrumbs.e2e.ts-snapshots/breadcrumb-standalone-diff-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..42a25abd11
Binary files /dev/null and b/core/src/components/breadcrumbs/test/standalone/breadcrumbs.e2e.ts-snapshots/breadcrumb-standalone-diff-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/standalone/breadcrumbs.e2e.ts-snapshots/breadcrumb-standalone-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/standalone/breadcrumbs.e2e.ts-snapshots/breadcrumb-standalone-diff-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..4642ac5f37
Binary files /dev/null and b/core/src/components/breadcrumbs/test/standalone/breadcrumbs.e2e.ts-snapshots/breadcrumb-standalone-diff-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/breadcrumbs/test/standalone/e2e.ts b/core/src/components/breadcrumbs/test/standalone/e2e.ts
deleted file mode 100644
index 199e817242..0000000000
--- a/core/src/components/breadcrumbs/test/standalone/e2e.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('breadcrumbs: standalone', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/breadcrumbs/test/standalone?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
diff --git a/core/src/components/loading/loading.scss b/core/src/components/loading/loading.scss
index bb5d42de5b..619e9f50b5 100644
--- a/core/src/components/loading/loading.scss
+++ b/core/src/components/loading/loading.scss
@@ -67,11 +67,6 @@
   z-index: $z-index-overlay-wrapper;
 }
 
-.spinner-lines,
-.spinner-lines-small,
-.spinner-bubbles,
-.spinner-circles,
-.spinner-crescent,
-.spinner-dots {
+ion-spinner {
   color: var(--spinner-color);
 }
diff --git a/core/src/components/loading/test/basic/index.html b/core/src/components/loading/test/basic/index.html
index 54623383f7..40ffdefe41 100644
--- a/core/src/components/loading/test/basic/index.html
+++ b/core/src/components/loading/test/basic/index.html
@@ -56,7 +56,7 @@
         <ion-button
           id="custom-class-loading"
           expand="block"
-          onclick="openLoading({duration: 5000,message: 'Please wait...', cssClass: 'custom-class custom-loading'})"
+          onclick="openLoading({duration: 5000,message: 'Please wait...', spinner: 'lines-sharp', cssClass: 'custom-class custom-loading'})"
           >Show Loading with cssClass</ion-button
         >
         <ion-button id="backdrop-loading" expand="block" onclick="openLoading({backdropDismiss: true})"
@@ -112,15 +112,15 @@
       }
 
       .custom-loading {
-        --background: rgba(37, 210, 223, 0.8);
-        --spinner-color: white;
+        --background: rgba(255, 255, 255, 0.8);
+        --spinner-color: #ea445a;
 
         --height: 100%;
         --max-height: auto;
         --width: 100%;
         --max-width: auto;
 
-        color: white;
+        color: #3478f6;
       }
 
       f {
diff --git a/core/src/components/loading/test/basic/loading.e2e.ts b/core/src/components/loading/test/basic/loading.e2e.ts
index c022b00423..08af2d8f57 100644
--- a/core/src/components/loading/test/basic/loading.e2e.ts
+++ b/core/src/components/loading/test/basic/loading.e2e.ts
@@ -39,7 +39,7 @@ test.describe('loading: basic', () => {
       await runVisualTest(page, '#translucent-loading', 'translucent');
     });
     test('should open a loader with a custom class', async ({ page }) => {
-      await runVisualTest(page, '#no-spinner-loading', 'no-spinner');
+      await runVisualTest(page, '#custom-class-loading', 'custom-class');
     });
     test('should open a loader with html content', async ({ page }) => {
       await runVisualTest(page, '#html-content-loading', 'html-content');
diff --git a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..d0cdc38469
Binary files /dev/null and b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..5c9620dec9
Binary files /dev/null and b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..4c563a3cf4
Binary files /dev/null and b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..5db2b66fb9
Binary files /dev/null and b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..09c3b8cf3e
Binary files /dev/null and b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..bcc1559c59
Binary files /dev/null and b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..6af72178c2
Binary files /dev/null and b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..923f281ade
Binary files /dev/null and b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..d3595b015a
Binary files /dev/null and b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..d3f714deb7
Binary files /dev/null and b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..13af4188f5
Binary files /dev/null and b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..4f8dcbb2a0
Binary files /dev/null and b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/modal/modal.tsx b/core/src/components/modal/modal.tsx
index 1c66ac9713..655006931f 100644
--- a/core/src/components/modal/modal.tsx
+++ b/core/src/components/modal/modal.tsx
@@ -442,6 +442,12 @@ export class Modal implements ComponentInterface, OverlayInterface {
       await this.currentTransition;
     }
 
+    /**
+     * If the modal is presented multiple times (inline modals), we
+     * need to reset the current breakpoint to the initial breakpoint.
+     */
+    this.currentBreakpoint = this.initialBreakpoint;
+
     const data = {
       ...this.componentProps,
       modal: this.el,
@@ -668,7 +674,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
 
       enteringAnimation.forEach((ani) => ani.destroy());
     }
-
+    this.currentBreakpoint = undefined;
     this.currentTransition = undefined;
     this.animation = undefined;
     return dismissed;
diff --git a/core/src/components/modal/test/basic/modal.e2e.ts b/core/src/components/modal/test/basic/modal.e2e.ts
index b3954018b0..0d1114ab84 100644
--- a/core/src/components/modal/test/basic/modal.e2e.ts
+++ b/core/src/components/modal/test/basic/modal.e2e.ts
@@ -43,8 +43,6 @@ test.describe('modal: focus trapping', () => {
     page,
     browserName,
   }) => {
-    // TODO FW-1436
-    test.skip(browserName === 'firefox', 'Focus is flaky on Firefox');
     await page.goto('/src/components/modal/test/basic');
     const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
     const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts b/core/src/components/modal/test/sheet/modal.e2e.ts
index 498eb4a639..b1bbb24a66 100644
--- a/core/src/components/modal/test/sheet/modal.e2e.ts
+++ b/core/src/components/modal/test/sheet/modal.e2e.ts
@@ -133,4 +133,65 @@ test.describe('sheet modal: setting the breakpoint', () => {
       expect(ionBreakpointDidChange.events.length).toBe(1);
     });
   });
+
+  test('it should reset the breakpoint value on dismiss', async ({ page }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/ionic-team/ionic-framework/issues/25245',
+    });
+
+    await page.setContent(`
+      <ion-content>
+        <ion-button id="open-modal">Open</ion-button>
+        <ion-modal trigger="open-modal" initial-breakpoint="0.25">
+          <ion-content>
+            <ion-button id="dismiss" onclick="modal.dismiss();">Dismiss</ion-button>
+            <ion-button id="set-breakpoint">Set breakpoint</ion-button>
+          </ion-content>
+        </ion-modal>
+      </ion-content>
+      <script>
+        const modal = document.querySelector('ion-modal');
+        const setBreakpointButton = document.querySelector('#set-breakpoint');
+
+        modal.breakpoints = [0.25, 0.5, 1];
+
+        setBreakpointButton.addEventListener('click', () => {
+          modal.setCurrentBreakpoint(0.5);
+        });
+      </script>
+    `);
+
+    const modal = page.locator('ion-modal');
+    const dismissButton = page.locator('#dismiss');
+    const openButton = page.locator('#open-modal');
+    const setBreakpointButton = page.locator('#set-breakpoint');
+
+    const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+    const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
+    const ionBreakpointDidChange = await page.spyOnEvent('ionBreakpointDidChange');
+
+    await openButton.click();
+    await ionModalDidPresent.next();
+
+    await setBreakpointButton.click();
+    await ionBreakpointDidChange.next();
+
+    await dismissButton.click();
+    await ionModalDidDismiss.next();
+
+    await openButton.click();
+    await ionModalDidPresent.next();
+
+    const breakpoint = await modal.evaluate((el: HTMLIonModalElement) => el.getCurrentBreakpoint());
+
+    expect(breakpoint).toBe(0.25);
+
+    await setBreakpointButton.click();
+    await ionBreakpointDidChange.next();
+
+    const updatedBreakpoint = await modal.evaluate((el: HTMLIonModalElement) => el.getCurrentBreakpoint());
+
+    expect(updatedBreakpoint).toBe(0.5);
+  });
 });
diff --git a/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts b/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts
index e14fc96dc1..cce0ec95d9 100644
--- a/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts
+++ b/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts
@@ -14,7 +14,7 @@ test.describe('picker-internal', () => {
 
   test.describe('within overlay:', () => {
     // TODO (FW-1397): Remove this test.skip when the issue is fixed.
-    test.skip('Flaky test', 'Mobile Safari and Chrome on Linux renders the selected option incorrectly');
+    test.skip(true, 'Mobile Safari and Chrome on Linux renders the selected option incorrectly');
 
     test('popover: should not have visual regression', async ({ page }) => {
       await page.goto(`/src/components/picker-internal/test/basic`);
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();
+};
diff --git a/core/src/components/select/test/async/e2e.ts b/core/src/components/select/test/async/e2e.ts
deleted file mode 100644
index c4958f5fc9..0000000000
--- a/core/src/components/select/test/async/e2e.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('select: async', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/select/test/async?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
diff --git a/core/src/components/select/test/async/index.html b/core/src/components/select/test/async/index.html
index 9046afd101..5293fb9bdb 100644
--- a/core/src/components/select/test/async/index.html
+++ b/core/src/components/select/test/async/index.html
@@ -44,8 +44,10 @@
           });
 
           select.value = options[0];
+
+          window.dispatchEvent(new CustomEvent('selectValueSet'));
         });
-      }, 5000);
+      }, 1000);
     </script>
   </body>
 </html>
diff --git a/core/src/components/select/test/async/select.e2e.ts b/core/src/components/select/test/async/select.e2e.ts
new file mode 100644
index 0000000000..fe72d9dcb8
--- /dev/null
+++ b/core/src/components/select/test/async/select.e2e.ts
@@ -0,0 +1,17 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('select: async', () => {
+  test('should correctly set the value after a delay', async ({ page }, testInfo) => {
+    test.skip(testInfo.project.metadata.rtl === true, 'This is checking internal logic. RTL tests are not needed');
+
+    await page.goto(`/src/components/select/test/async`);
+    const selectValueSet = await page.spyOnEvent('selectValueSet');
+
+    const select = await page.locator('#default');
+
+    await selectValueSet.next();
+
+    expect(select).toHaveJSProperty('value', 'bird');
+  });
+});
diff --git a/core/src/components/select/test/basic/e2e.ts b/core/src/components/select/test/basic/e2e.ts
deleted file mode 100644
index 55222ea5e6..0000000000
--- a/core/src/components/select/test/basic/e2e.ts
+++ /dev/null
@@ -1,117 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('select: basic', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/select/test/basic?ionic:_testing=true',
-  });
-
-  const compares = [];
-  compares.push(await page.compareScreenshot());
-
-  // Gender Alert Select
-  let select = await page.find('#gender');
-
-  // add an event spy to the select
-  const ionDismiss = await select.spyOnEvent('ionDismiss');
-
-  await select.click();
-
-  let alert = await page.find('ion-alert');
-  await alert.waitForVisible();
-  await page.waitForTimeout(250);
-
-  compares.push(await page.compareScreenshot('should open gender single select'));
-
-  await alert.callMethod('dismiss');
-
-  expect(ionDismiss).toHaveReceivedEvent();
-
-  // Skittles Action Sheet Select
-  select = await page.find('#skittles');
-  await select.click();
-
-  let actionSheet = await page.find('ion-action-sheet');
-  await actionSheet.waitForVisible();
-  await page.waitForTimeout(250);
-
-  compares.push(await page.compareScreenshot('should open skittles action sheet select'));
-
-  await actionSheet.callMethod('dismiss');
-
-  expect(ionDismiss).toHaveReceivedEvent();
-
-  // Custom Alert Select
-  select = await page.find('#customAlertSelect');
-  await select.click();
-
-  alert = await page.find('ion-alert');
-  await alert.waitForVisible();
-  await page.waitForTimeout(250);
-
-  compares.push(await page.compareScreenshot('should open custom alert select'));
-
-  await alert.callMethod('dismiss');
-
-  expect(ionDismiss).toHaveReceivedEvent();
-
-  // Custom Popover Select
-  select = await page.find('#customPopoverSelect');
-  await select.click();
-
-  let popover = await page.find('ion-popover');
-  await popover.waitForVisible();
-  await page.waitForTimeout(250);
-
-  compares.push(await page.compareScreenshot('should open custom popover select'));
-
-  // select has no value, so first option should be focused by default
-  const popoverOption1 = await popover.find('.select-interface-option:first-child');
-  expect(popoverOption1).toHaveClass('ion-focused');
-
-  let popoverOption2 = await popover.find('.select-interface-option:nth-child(2)');
-  await popoverOption2.click();
-  await page.waitForTimeout(500);
-
-  await select.click();
-  popover = await page.find('ion-popover');
-  await popover.waitForVisible();
-  await page.waitForTimeout(250);
-
-  popoverOption2 = await popover.find('.select-interface-option:nth-child(2)');
-  expect(popoverOption2).toHaveClass('ion-focused');
-
-  await popover.callMethod('dismiss');
-
-  expect(ionDismiss).toHaveReceivedEvent();
-
-  // Custom Action Sheet Select
-  select = await page.find('#customActionSheetSelect');
-  await select.click();
-
-  actionSheet = await page.find('ion-action-sheet');
-  await actionSheet.waitForVisible();
-  await page.waitForTimeout(250);
-
-  compares.push(await page.compareScreenshot('should open custom action sheet select'));
-
-  await actionSheet.callMethod('dismiss');
-
-  expect(ionDismiss).toHaveReceivedEvent();
-
-  for (const compare of compares) {
-    expect(compare).toMatchScreenshot();
-  }
-});
-
-test('select:rtl: basic', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/select/test/basic?ionic:_testing=true&rtl=true',
-  });
-
-  const compares = [];
-  compares.push(await page.compareScreenshot());
-
-  for (const compare of compares) {
-    expect(compare).toMatchScreenshot();
-  }
-});
diff --git a/core/src/components/select/test/basic/select.e2e.ts b/core/src/components/select/test/basic/select.e2e.ts
index f774cd8860..7a4b863bf8 100644
--- a/core/src/components/select/test/basic/select.e2e.ts
+++ b/core/src/components/select/test/basic/select.e2e.ts
@@ -2,14 +2,16 @@ import { expect } from '@playwright/test';
 import { test } from '@utils/test/playwright';
 
 test.describe('select: basic', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/src/components/select/test/basic');
+  });
+
   test('should not open multiple alert windows when clicked multiple times', async ({ page }) => {
     test.info().annotations.push({
       type: 'issue',
       description: 'https://github.com/ionic-team/ionic-framework/issues/25126',
     });
 
-    await page.goto('/src/components/select/test/basic');
-
     const select = page.locator('#gender');
 
     await select.evaluate((el: HTMLSelectElement) => {
@@ -28,4 +30,68 @@ test.describe('select: basic', () => {
 
     expect(alerts.length).toBe(1);
   });
+
+  test.describe('select: alert', () => {
+    test('it should open an alert select', async ({ page }) => {
+      const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
+      const ionDismiss = await page.spyOnEvent('ionDismiss');
+
+      await page.click('#customAlertSelect');
+
+      await ionAlertDidPresent.next();
+
+      expect(await page.screenshot()).toMatchSnapshot(`select-alert-diff-${page.getSnapshotSettings()}.png`);
+
+      const alert = await page.locator('ion-alert');
+      await alert.evaluate((el: HTMLIonAlertElement) => el.dismiss());
+
+      await ionDismiss.next();
+    });
+  });
+
+  test.describe('select: action sheet', () => {
+    test('it should open an action sheet select', async ({ page }) => {
+      const ionActionSheetDidPresent = await page.spyOnEvent('ionActionSheetDidPresent');
+      const ionDismiss = await page.spyOnEvent('ionDismiss');
+
+      await page.click('#customActionSheetSelect');
+
+      await ionActionSheetDidPresent.next();
+
+      expect(await page.screenshot()).toMatchSnapshot(`select-action-sheet-diff-${page.getSnapshotSettings()}.png`);
+
+      const actionSheet = await page.locator('ion-action-sheet');
+      await actionSheet.evaluate((el: HTMLIonActionSheetElement) => el.dismiss());
+
+      await ionDismiss.next();
+    });
+  });
+
+  test.describe('select: popover', () => {
+    test('it should open a popover select', async ({ page, browserName }) => {
+      const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
+      const ionDismiss = await page.spyOnEvent('ionDismiss');
+
+      await page.click('#customPopoverSelect');
+
+      await ionPopoverDidPresent.next();
+
+      const popover = await page.locator('ion-popover');
+
+      // TODO(FW-1436)
+      if (browserName !== 'firefox') {
+        // select has no value, so first option should be focused by default
+        const popoverOption1 = await popover.locator('.select-interface-option:first-of-type ion-radio');
+        expect(popoverOption1).toBeFocused();
+      }
+
+      expect(await page.screenshot({ animations: 'disabled' })).toMatchSnapshot(
+        `select-popover-diff-${page.getSnapshotSettings()}.png`
+      );
+
+      await popover.evaluate((el: HTMLIonPopoverElement) => el.dismiss());
+
+      await ionDismiss.next();
+    });
+  });
 });
diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-action-sheet-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-action-sheet-diff-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..ffc7f0ccfa
Binary files /dev/null and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-action-sheet-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-action-sheet-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-action-sheet-diff-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..1d28a26bff
Binary files /dev/null and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-action-sheet-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-action-sheet-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-action-sheet-diff-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..9c2d8b47b7
Binary files /dev/null and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-action-sheet-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-action-sheet-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-action-sheet-diff-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..ec16f7e31c
Binary files /dev/null and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-action-sheet-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-action-sheet-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-action-sheet-diff-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..d416ed5c0f
Binary files /dev/null and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-action-sheet-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-action-sheet-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-action-sheet-diff-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..9232a60286
Binary files /dev/null and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-action-sheet-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-action-sheet-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-action-sheet-diff-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..0639616676
Binary files /dev/null and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-action-sheet-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-action-sheet-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-action-sheet-diff-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..045b7e1da1
Binary files /dev/null and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-action-sheet-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-action-sheet-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-action-sheet-diff-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..e847f10a9b
Binary files /dev/null and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-action-sheet-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-action-sheet-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-action-sheet-diff-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..2f328a4411
Binary files /dev/null and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-action-sheet-diff-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-action-sheet-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-action-sheet-diff-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..75103cc439
Binary files /dev/null and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-action-sheet-diff-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-action-sheet-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-action-sheet-diff-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..232c03b2a7
Binary files /dev/null and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-action-sheet-diff-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-alert-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-alert-diff-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..78f9871833
Binary files /dev/null and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-alert-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-alert-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-alert-diff-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..9e6656089c
Binary files /dev/null and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-alert-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-alert-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-alert-diff-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..80b9386bce
Binary files /dev/null and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-alert-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-alert-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-alert-diff-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..eed26fd706
Binary files /dev/null and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-alert-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-alert-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-alert-diff-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..d72cdad838
Binary files /dev/null and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-alert-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-alert-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-alert-diff-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..f4bcf5a2a5
Binary files /dev/null and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-alert-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-alert-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-alert-diff-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..57e763e20c
Binary files /dev/null and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-alert-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-alert-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-alert-diff-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..a1dbfca33c
Binary files /dev/null and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-alert-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-alert-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-alert-diff-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..11c44b2031
Binary files /dev/null and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-alert-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-alert-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-alert-diff-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..47e6679305
Binary files /dev/null and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-alert-diff-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-alert-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-alert-diff-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..633413e500
Binary files /dev/null and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-alert-diff-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-alert-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-alert-diff-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..1dcfa4061f
Binary files /dev/null and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-alert-diff-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-popover-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-popover-diff-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..5ae43f022e
Binary files /dev/null and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-popover-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-popover-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-popover-diff-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..740f4b6ba5
Binary files /dev/null and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-popover-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-popover-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-popover-diff-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..7f829c3824
Binary files /dev/null and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-popover-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-popover-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-popover-diff-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..e79e05be8b
Binary files /dev/null and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-popover-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-popover-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-popover-diff-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..71cb18fb31
Binary files /dev/null and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-popover-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-popover-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-popover-diff-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..ed91fd04e5
Binary files /dev/null and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-popover-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-popover-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-popover-diff-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..b514ef41c3
Binary files /dev/null and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-popover-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-popover-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-popover-diff-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..a5f6dd4ad9
Binary files /dev/null and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-popover-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-popover-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-popover-diff-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..8c14302ae4
Binary files /dev/null and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-popover-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-popover-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-popover-diff-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..e96f3c6308
Binary files /dev/null and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-popover-diff-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-popover-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-popover-diff-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..b1c84a8e5b
Binary files /dev/null and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-popover-diff-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-popover-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-popover-diff-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..09653d1602
Binary files /dev/null and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-popover-diff-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/compare-with/e2e.ts b/core/src/components/select/test/compare-with/e2e.ts
deleted file mode 100644
index 050fd6e841..0000000000
--- a/core/src/components/select/test/compare-with/e2e.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('select: compareWith', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/select/test/compare-with?ionic:_testing=true',
-  });
-
-  const compares = [];
-  compares.push(await page.compareScreenshot());
-
-  const selectMultiple = await page.find('#multiple');
-  await selectMultiple.click();
-
-  let alert = await page.find('ion-alert');
-  await alert.waitForVisible();
-  await page.waitForTimeout(250);
-
-  compares.push(await page.compareScreenshot('should open select[multiple] with option selected'));
-
-  await alert.callMethod('dismiss');
-
-  const selectSingle = await page.find('#single');
-  await selectSingle.click();
-
-  alert = await page.find('ion-alert');
-  await alert.waitForVisible();
-  await page.waitForTimeout(250);
-
-  compares.push(await page.compareScreenshot('should open select with option selected'));
-
-  await alert.callMethod('dismiss');
-
-  for (const compare of compares) {
-    expect(compare).toMatchScreenshot();
-  }
-});
diff --git a/core/src/components/select/test/compare-with/select.e2e.ts b/core/src/components/select/test/compare-with/select.e2e.ts
new file mode 100644
index 0000000000..82c03ff79c
--- /dev/null
+++ b/core/src/components/select/test/compare-with/select.e2e.ts
@@ -0,0 +1,24 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('select: compare-with', () => {
+  test('should correctly set value when using compareWith property', async ({ page }, testInfo) => {
+    test.skip(testInfo.project.metadata.rtl === true, 'This is checking internal logic. RTL tests are not needed');
+
+    await page.goto('/src/components/select/test/compare-with');
+
+    const multipleSelect = await page.locator('#multiple');
+    const singleSelect = await page.locator('#single');
+
+    expect(multipleSelect).toHaveJSProperty('value', [
+      {
+        label: 'selected by default',
+        value: '1',
+      },
+    ]);
+    expect(singleSelect).toHaveJSProperty('value', {
+      label: 'selected by default',
+      value: '1',
+    });
+  });
+});
diff --git a/core/src/components/select/test/custom/custom.e2e.ts b/core/src/components/select/test/custom/custom.e2e.ts
new file mode 100644
index 0000000000..6c747ec462
--- /dev/null
+++ b/core/src/components/select/test/custom/custom.e2e.ts
@@ -0,0 +1,10 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('select: custom', () => {
+  test('should not have visual regressions', async ({ page }) => {
+    await page.goto(`/src/components/select/test/custom`);
+
+    expect(await page.screenshot()).toMatchSnapshot(`select-custom-diff-${page.getSnapshotSettings()}.png`);
+  });
+});
diff --git a/core/src/components/select/test/custom/custom.e2e.ts-snapshots/select-custom-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/custom/custom.e2e.ts-snapshots/select-custom-diff-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..7d0dba7da9
Binary files /dev/null and b/core/src/components/select/test/custom/custom.e2e.ts-snapshots/select-custom-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/custom/custom.e2e.ts-snapshots/select-custom-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/custom/custom.e2e.ts-snapshots/select-custom-diff-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..29ee85f9b2
Binary files /dev/null and b/core/src/components/select/test/custom/custom.e2e.ts-snapshots/select-custom-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/custom/custom.e2e.ts-snapshots/select-custom-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/custom/custom.e2e.ts-snapshots/select-custom-diff-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..beff63045a
Binary files /dev/null and b/core/src/components/select/test/custom/custom.e2e.ts-snapshots/select-custom-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/custom/custom.e2e.ts-snapshots/select-custom-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/select/test/custom/custom.e2e.ts-snapshots/select-custom-diff-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..5f0c70e411
Binary files /dev/null and b/core/src/components/select/test/custom/custom.e2e.ts-snapshots/select-custom-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/custom/custom.e2e.ts-snapshots/select-custom-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/select/test/custom/custom.e2e.ts-snapshots/select-custom-diff-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..fc0fc2a446
Binary files /dev/null and b/core/src/components/select/test/custom/custom.e2e.ts-snapshots/select-custom-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/custom/custom.e2e.ts-snapshots/select-custom-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/select/test/custom/custom.e2e.ts-snapshots/select-custom-diff-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..a62885b755
Binary files /dev/null and b/core/src/components/select/test/custom/custom.e2e.ts-snapshots/select-custom-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/custom/custom.e2e.ts-snapshots/select-custom-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/custom/custom.e2e.ts-snapshots/select-custom-diff-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..de2468ee94
Binary files /dev/null and b/core/src/components/select/test/custom/custom.e2e.ts-snapshots/select-custom-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/custom/custom.e2e.ts-snapshots/select-custom-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/custom/custom.e2e.ts-snapshots/select-custom-diff-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..80e4c7c4f5
Binary files /dev/null and b/core/src/components/select/test/custom/custom.e2e.ts-snapshots/select-custom-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/custom/custom.e2e.ts-snapshots/select-custom-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/custom/custom.e2e.ts-snapshots/select-custom-diff-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..1a2f963bf0
Binary files /dev/null and b/core/src/components/select/test/custom/custom.e2e.ts-snapshots/select-custom-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/custom/custom.e2e.ts-snapshots/select-custom-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/select/test/custom/custom.e2e.ts-snapshots/select-custom-diff-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..1cb0d66dd9
Binary files /dev/null and b/core/src/components/select/test/custom/custom.e2e.ts-snapshots/select-custom-diff-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/custom/custom.e2e.ts-snapshots/select-custom-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/select/test/custom/custom.e2e.ts-snapshots/select-custom-diff-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..f56552abaf
Binary files /dev/null and b/core/src/components/select/test/custom/custom.e2e.ts-snapshots/select-custom-diff-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/custom/custom.e2e.ts-snapshots/select-custom-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/select/test/custom/custom.e2e.ts-snapshots/select-custom-diff-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..012afd1754
Binary files /dev/null and b/core/src/components/select/test/custom/custom.e2e.ts-snapshots/select-custom-diff-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/custom/e2e.ts b/core/src/components/select/test/custom/e2e.ts
deleted file mode 100644
index 64bfe1cc3d..0000000000
--- a/core/src/components/select/test/custom/e2e.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('select: custom', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/select/test/custom?ionic:_testing=true',
-  });
-
-  const compares = [];
-  compares.push(await page.compareScreenshot());
-
-  for (const compare of compares) {
-    expect(compare).toMatchScreenshot();
-  }
-});
-
-test('select:rtl: custom', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/select/test/custom?ionic:_testing=true&rtl=true',
-  });
-
-  const compares = [];
-  compares.push(await page.compareScreenshot());
-
-  for (const compare of compares) {
-    expect(compare).toMatchScreenshot();
-  }
-});
diff --git a/core/src/components/select/test/label/e2e.ts b/core/src/components/select/test/label/e2e.ts
deleted file mode 100644
index d4c27c97bc..0000000000
--- a/core/src/components/select/test/label/e2e.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-it('select: label', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/select/test/label?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
diff --git a/core/src/components/select/test/multiple-value/e2e.ts b/core/src/components/select/test/multiple-value/e2e.ts
deleted file mode 100644
index 3cddc83ec3..0000000000
--- a/core/src/components/select/test/multiple-value/e2e.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('select: multiple-value', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/select/test/multiple-value?ionic:_testing=true',
-  });
-
-  let compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-
-  const select = await page.find('#toppings');
-  await select.click();
-
-  const alert = await page.find('ion-alert');
-  await alert.waitForVisible();
-  await page.waitForTimeout(250);
-
-  compare = await page.compareScreenshot('should open toppings multiple select');
-  expect(compare).toMatchScreenshot();
-});
diff --git a/core/src/components/select/test/single-value/e2e.ts b/core/src/components/select/test/single-value/e2e.ts
deleted file mode 100644
index b7b8e082fd..0000000000
--- a/core/src/components/select/test/single-value/e2e.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('select: single-value', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/select/test/single-value?ionic:_testing=true',
-  });
-
-  let compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-
-  const select = await page.find('#gender');
-  await select.click();
-
-  const alert = await page.find('ion-alert');
-  await alert.waitForVisible();
-  await page.waitForTimeout(250);
-
-  compare = await page.compareScreenshot('should open gender single select');
-  expect(compare).toMatchScreenshot();
-});
diff --git a/core/src/components/select/test/single-value/select.e2e.ts b/core/src/components/select/test/single-value/select.e2e.ts
new file mode 100644
index 0000000000..128bc63a35
--- /dev/null
+++ b/core/src/components/select/test/single-value/select.e2e.ts
@@ -0,0 +1,16 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('select: single-value', () => {
+  test('should open single value select', async ({ page }) => {
+    await page.goto(`/src/components/select/test/single-value`);
+
+    const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
+
+    await page.click('#gender');
+
+    await ionAlertDidPresent.next();
+
+    expect(await page.screenshot()).toMatchSnapshot(`select-single-value-diff-${page.getSnapshotSettings()}.png`);
+  });
+});
diff --git a/core/src/components/select/test/single-value/select.e2e.ts-snapshots/select-single-value-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/single-value/select.e2e.ts-snapshots/select-single-value-diff-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..a521313140
Binary files /dev/null and b/core/src/components/select/test/single-value/select.e2e.ts-snapshots/select-single-value-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/single-value/select.e2e.ts-snapshots/select-single-value-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/single-value/select.e2e.ts-snapshots/select-single-value-diff-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..50c01c0fb6
Binary files /dev/null and b/core/src/components/select/test/single-value/select.e2e.ts-snapshots/select-single-value-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/single-value/select.e2e.ts-snapshots/select-single-value-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/single-value/select.e2e.ts-snapshots/select-single-value-diff-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..2a952222f6
Binary files /dev/null and b/core/src/components/select/test/single-value/select.e2e.ts-snapshots/select-single-value-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/single-value/select.e2e.ts-snapshots/select-single-value-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/select/test/single-value/select.e2e.ts-snapshots/select-single-value-diff-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..662d6c08b2
Binary files /dev/null and b/core/src/components/select/test/single-value/select.e2e.ts-snapshots/select-single-value-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/single-value/select.e2e.ts-snapshots/select-single-value-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/select/test/single-value/select.e2e.ts-snapshots/select-single-value-diff-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..bb9a341a86
Binary files /dev/null and b/core/src/components/select/test/single-value/select.e2e.ts-snapshots/select-single-value-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/single-value/select.e2e.ts-snapshots/select-single-value-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/select/test/single-value/select.e2e.ts-snapshots/select-single-value-diff-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..95d34e2b4e
Binary files /dev/null and b/core/src/components/select/test/single-value/select.e2e.ts-snapshots/select-single-value-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/single-value/select.e2e.ts-snapshots/select-single-value-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/single-value/select.e2e.ts-snapshots/select-single-value-diff-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..e25f042ea5
Binary files /dev/null and b/core/src/components/select/test/single-value/select.e2e.ts-snapshots/select-single-value-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/single-value/select.e2e.ts-snapshots/select-single-value-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/single-value/select.e2e.ts-snapshots/select-single-value-diff-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..601fbb271a
Binary files /dev/null and b/core/src/components/select/test/single-value/select.e2e.ts-snapshots/select-single-value-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/single-value/select.e2e.ts-snapshots/select-single-value-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/single-value/select.e2e.ts-snapshots/select-single-value-diff-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..177929ca86
Binary files /dev/null and b/core/src/components/select/test/single-value/select.e2e.ts-snapshots/select-single-value-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/single-value/select.e2e.ts-snapshots/select-single-value-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/select/test/single-value/select.e2e.ts-snapshots/select-single-value-diff-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..6452bfbb3d
Binary files /dev/null and b/core/src/components/select/test/single-value/select.e2e.ts-snapshots/select-single-value-diff-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/single-value/select.e2e.ts-snapshots/select-single-value-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/select/test/single-value/select.e2e.ts-snapshots/select-single-value-diff-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..212595dc5b
Binary files /dev/null and b/core/src/components/select/test/single-value/select.e2e.ts-snapshots/select-single-value-diff-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/single-value/select.e2e.ts-snapshots/select-single-value-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/select/test/single-value/select.e2e.ts-snapshots/select-single-value-diff-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..ed651edad2
Binary files /dev/null and b/core/src/components/select/test/single-value/select.e2e.ts-snapshots/select-single-value-diff-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/spec/e2e.ts b/core/src/components/select/test/spec/e2e.ts
deleted file mode 100644
index 44b1955c46..0000000000
--- a/core/src/components/select/test/spec/e2e.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('select: spec', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/select/test/spec?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
diff --git a/core/src/components/select/test/spec/select.e2e.ts b/core/src/components/select/test/spec/select.e2e.ts
new file mode 100644
index 0000000000..81225abb28
--- /dev/null
+++ b/core/src/components/select/test/spec/select.e2e.ts
@@ -0,0 +1,12 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('select: spec', () => {
+  test('should not have visual regressions', async ({ page }) => {
+    await page.goto(`/src/components/select/test/spec`);
+
+    await page.setIonViewport();
+
+    expect(await page.screenshot()).toMatchSnapshot(`select-spec-diff-${page.getSnapshotSettings()}.png`);
+  });
+});
diff --git a/core/src/components/select/test/spec/select.e2e.ts-snapshots/select-spec-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/spec/select.e2e.ts-snapshots/select-spec-diff-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..6149adef69
Binary files /dev/null and b/core/src/components/select/test/spec/select.e2e.ts-snapshots/select-spec-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/spec/select.e2e.ts-snapshots/select-spec-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/spec/select.e2e.ts-snapshots/select-spec-diff-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..7830b8a887
Binary files /dev/null and b/core/src/components/select/test/spec/select.e2e.ts-snapshots/select-spec-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/spec/select.e2e.ts-snapshots/select-spec-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/spec/select.e2e.ts-snapshots/select-spec-diff-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..336ab4a454
Binary files /dev/null and b/core/src/components/select/test/spec/select.e2e.ts-snapshots/select-spec-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/spec/select.e2e.ts-snapshots/select-spec-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/select/test/spec/select.e2e.ts-snapshots/select-spec-diff-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..f4a9c19e9d
Binary files /dev/null and b/core/src/components/select/test/spec/select.e2e.ts-snapshots/select-spec-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/spec/select.e2e.ts-snapshots/select-spec-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/select/test/spec/select.e2e.ts-snapshots/select-spec-diff-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..8ba3d8ea16
Binary files /dev/null and b/core/src/components/select/test/spec/select.e2e.ts-snapshots/select-spec-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/spec/select.e2e.ts-snapshots/select-spec-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/select/test/spec/select.e2e.ts-snapshots/select-spec-diff-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..82beb40572
Binary files /dev/null and b/core/src/components/select/test/spec/select.e2e.ts-snapshots/select-spec-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/spec/select.e2e.ts-snapshots/select-spec-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/spec/select.e2e.ts-snapshots/select-spec-diff-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..4b7624ef0a
Binary files /dev/null and b/core/src/components/select/test/spec/select.e2e.ts-snapshots/select-spec-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/spec/select.e2e.ts-snapshots/select-spec-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/spec/select.e2e.ts-snapshots/select-spec-diff-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..6f345bb309
Binary files /dev/null and b/core/src/components/select/test/spec/select.e2e.ts-snapshots/select-spec-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/spec/select.e2e.ts-snapshots/select-spec-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/spec/select.e2e.ts-snapshots/select-spec-diff-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..abb55b41c3
Binary files /dev/null and b/core/src/components/select/test/spec/select.e2e.ts-snapshots/select-spec-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/spec/select.e2e.ts-snapshots/select-spec-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/select/test/spec/select.e2e.ts-snapshots/select-spec-diff-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..bc0f686459
Binary files /dev/null and b/core/src/components/select/test/spec/select.e2e.ts-snapshots/select-spec-diff-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/spec/select.e2e.ts-snapshots/select-spec-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/select/test/spec/select.e2e.ts-snapshots/select-spec-diff-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..67cb62b5b0
Binary files /dev/null and b/core/src/components/select/test/spec/select.e2e.ts-snapshots/select-spec-diff-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/spec/select.e2e.ts-snapshots/select-spec-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/select/test/spec/select.e2e.ts-snapshots/select-spec-diff-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..d1a4d3fcec
Binary files /dev/null and b/core/src/components/select/test/spec/select.e2e.ts-snapshots/select-spec-diff-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/standalone/e2e.ts b/core/src/components/select/test/standalone/e2e.ts
deleted file mode 100644
index 4c98a18bca..0000000000
--- a/core/src/components/select/test/standalone/e2e.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('select: standalone', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/select/test/standalone?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
diff --git a/core/src/components/select/test/standalone/select.e2e.ts b/core/src/components/select/test/standalone/select.e2e.ts
new file mode 100644
index 0000000000..5cb75a5a03
--- /dev/null
+++ b/core/src/components/select/test/standalone/select.e2e.ts
@@ -0,0 +1,18 @@
+import { test } from '@utils/test/playwright';
+
+test.describe('select: standalone', () => {
+  test('should open an overlay without ion-app', async ({ page }) => {
+    await page.goto(`/src/components/select/test/standalone`);
+    const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
+    const ionAlertDidDismiss = await page.spyOnEvent('ionAlertDidDismiss');
+
+    await page.click('#gender');
+
+    await ionAlertDidPresent.next();
+
+    const alert = await page.locator('ion-alert');
+    await alert.evaluate((el: HTMLIonAlertElement) => el.dismiss());
+
+    await ionAlertDidDismiss.next();
+  });
+});
diff --git a/core/src/utils/input-shims/hacks/scroll-assist.ts b/core/src/utils/input-shims/hacks/scroll-assist.ts
index f7239bce08..5e404341b9 100644
--- a/core/src/utils/input-shims/hacks/scroll-assist.ts
+++ b/core/src/utils/input-shims/hacks/scroll-assist.ts
@@ -27,8 +27,6 @@ export const enableScrollAssist = (
     // focus this input if the pointer hasn't moved XX pixels
     // and the input doesn't already have focus
     if (!hasPointerMoved(6, coord, endCoord) && !isFocused(inputEl)) {
-      ev.stopPropagation();
-
       // begin the input focus process
       jsSetFocus(componentEl, inputEl, contentEl, footerEl, keyboardHeight);
     }
diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
index 81f63dfaa7..5fb171b955 100644
--- a/docs/CHANGELOG.md
+++ b/docs/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.1.6](https://github.com/ionic-team/ionic-docs/compare/v6.1.5...v6.1.6) (2022-05-18)
+
+**Note:** Version bump only for package @ionic/docs
+
+
+
+
+
 ## [6.1.5](https://github.com/ionic-team/ionic-docs/compare/v6.1.4...v6.1.5) (2022-05-11)
 
 **Note:** Version bump only for package @ionic/docs
diff --git a/docs/package-lock.json b/docs/package-lock.json
index 0fd85d80fc..9b5e5c7b1f 100644
--- a/docs/package-lock.json
+++ b/docs/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@ionic/docs",
-  "version": "6.1.5",
+  "version": "6.1.6",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/docs",
-      "version": "6.1.5",
+      "version": "6.1.6",
       "license": "MIT"
     }
   }
diff --git a/docs/package.json b/docs/package.json
index f93bb7cfa1..b8cd0eafbf 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/docs",
-  "version": "6.1.5",
+  "version": "6.1.6",
   "description": "Pre-packaged API documentation for the Ionic docs.",
   "main": "core.json",
   "types": "core.d.ts",
diff --git a/lerna.json b/lerna.json
index f38e191cf7..ba301947fb 100644
--- a/lerna.json
+++ b/lerna.json
@@ -5,5 +5,5 @@
     "angular",
     "packages/*"
   ],
-  "version": "6.1.5"
+  "version": "6.1.6"
 }
diff --git a/packages/angular-server/CHANGELOG.md b/packages/angular-server/CHANGELOG.md
index 069b654b90..cd151c1f7a 100644
--- a/packages/angular-server/CHANGELOG.md
+++ b/packages/angular-server/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.1.6](https://github.com/ionic-team/ionic/compare/v6.1.5...v6.1.6) (2022-05-18)
+
+**Note:** Version bump only for package @ionic/angular-server
+
+
+
+
+
 ## [6.1.5](https://github.com/ionic-team/ionic/compare/v6.1.4...v6.1.5) (2022-05-11)
 
 **Note:** Version bump only for package @ionic/angular-server
diff --git a/packages/angular-server/package-lock.json b/packages/angular-server/package-lock.json
index 359d294ca0..0f756471f0 100644
--- a/packages/angular-server/package-lock.json
+++ b/packages/angular-server/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@ionic/angular-server",
-  "version": "6.1.5",
+  "version": "6.1.6",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/angular-server",
-      "version": "6.1.5",
+      "version": "6.1.6",
       "license": "MIT",
       "devDependencies": {
         "@angular-eslint/eslint-plugin": "^12.6.1",
@@ -18,7 +18,7 @@
         "@angular/platform-browser": "^12.0.0",
         "@angular/platform-browser-dynamic": "^12.2.10",
         "@angular/platform-server": "^12.0.0",
-        "@ionic/core": "^6.1.5",
+        "@ionic/core": "^6.1.6",
         "@ionic/eslint-config": "^0.3.0",
         "@ionic/prettier-config": "^2.0.0",
         "@typescript-eslint/eslint-plugin": "^5.2.0",
@@ -786,9 +786,9 @@
       "license": "BSD-3-Clause"
     },
     "node_modules/@ionic/core": {
-      "version": "6.1.5",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.5.tgz",
-      "integrity": "sha512-YEpFheFDGV7lifbYNqctcPXRPqEOKiDy5KgSPriFzrrPUbwrv/tnXHZq7hFVPCMUYFBS9QJts4r5FOYTqAfvtw==",
+      "version": "6.1.6",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.6.tgz",
+      "integrity": "sha512-AsYGEHKVHy082RST3RBrIiOZX6VXNy6qYSYtf6TwOwmF/YV+/ASaB1TqVO/jP658ML106nNcjUM0fTkbm9UXRA==",
       "dev": true,
       "dependencies": {
         "@stencil/core": "^2.14.2",
@@ -7116,9 +7116,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "6.1.5",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.5.tgz",
-      "integrity": "sha512-YEpFheFDGV7lifbYNqctcPXRPqEOKiDy5KgSPriFzrrPUbwrv/tnXHZq7hFVPCMUYFBS9QJts4r5FOYTqAfvtw==",
+      "version": "6.1.6",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.6.tgz",
+      "integrity": "sha512-AsYGEHKVHy082RST3RBrIiOZX6VXNy6qYSYtf6TwOwmF/YV+/ASaB1TqVO/jP658ML106nNcjUM0fTkbm9UXRA==",
       "dev": true,
       "requires": {
         "@stencil/core": "^2.14.2",
diff --git a/packages/angular-server/package.json b/packages/angular-server/package.json
index f003ffff80..1dc2caa277 100644
--- a/packages/angular-server/package.json
+++ b/packages/angular-server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular-server",
-  "version": "6.1.5",
+  "version": "6.1.6",
   "description": "Angular SSR Module for Ionic",
   "keywords": [
     "ionic",
@@ -56,7 +56,7 @@
     "@angular/platform-browser": "^12.0.0",
     "@angular/platform-browser-dynamic": "^12.2.10",
     "@angular/platform-server": "^12.0.0",
-    "@ionic/core": "^6.1.5",
+    "@ionic/core": "^6.1.6",
     "@ionic/eslint-config": "^0.3.0",
     "@ionic/prettier-config": "^2.0.0",
     "@typescript-eslint/eslint-plugin": "^5.2.0",
diff --git a/packages/react-router/CHANGELOG.md b/packages/react-router/CHANGELOG.md
index dac0d360cc..dda2bcb3e7 100644
--- a/packages/react-router/CHANGELOG.md
+++ b/packages/react-router/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.1.6](https://github.com/ionic-team/ionic/compare/v6.1.5...v6.1.6) (2022-05-18)
+
+**Note:** Version bump only for package @ionic/react-router
+
+
+
+
+
 ## [6.1.5](https://github.com/ionic-team/ionic/compare/v6.1.4...v6.1.5) (2022-05-11)
 
 **Note:** Version bump only for package @ionic/react-router
diff --git a/packages/react-router/package-lock.json b/packages/react-router/package-lock.json
index b9e4058905..1d9790947a 100644
--- a/packages/react-router/package-lock.json
+++ b/packages/react-router/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/react-router",
-  "version": "6.1.5",
+  "version": "6.1.6",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/react-router",
-      "version": "6.1.5",
+      "version": "6.1.6",
       "license": "MIT",
       "dependencies": {
-        "@ionic/react": "^6.1.5",
+        "@ionic/react": "^6.1.6",
         "tslib": "*"
       },
       "devDependencies": {
@@ -148,9 +148,9 @@
       }
     },
     "node_modules/@ionic/core": {
-      "version": "6.1.5",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.5.tgz",
-      "integrity": "sha512-YEpFheFDGV7lifbYNqctcPXRPqEOKiDy5KgSPriFzrrPUbwrv/tnXHZq7hFVPCMUYFBS9QJts4r5FOYTqAfvtw==",
+      "version": "6.1.6",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.6.tgz",
+      "integrity": "sha512-AsYGEHKVHy082RST3RBrIiOZX6VXNy6qYSYtf6TwOwmF/YV+/ASaB1TqVO/jP658ML106nNcjUM0fTkbm9UXRA==",
       "dependencies": {
         "@stencil/core": "^2.14.2",
         "ionicons": "^6.0.0",
@@ -158,11 +158,11 @@
       }
     },
     "node_modules/@ionic/react": {
-      "version": "6.1.5",
-      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-6.1.5.tgz",
-      "integrity": "sha512-AcsMiNziXgehXG62yIDQFkCCtMwjiQF2V5OS2c6SIrJjrxR9ZTtCZWThL19/thF/PZys5pFN0ue8nuHKggG9Zw==",
+      "version": "6.1.6",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-6.1.6.tgz",
+      "integrity": "sha512-V/NxjN7VbGrFrez90g89Q1HVXcGlLEexGCtVeWhbK80h1lzGy2FMzT4BBW1qTvMGOZz2Umdoj+R1wcK91BbiJQ==",
       "dependencies": {
-        "@ionic/core": "^6.1.5",
+        "@ionic/core": "^6.1.6",
         "ionicons": "^6.0.0",
         "tslib": "*"
       },
@@ -4501,9 +4501,9 @@
       }
     },
     "@ionic/core": {
-      "version": "6.1.5",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.5.tgz",
-      "integrity": "sha512-YEpFheFDGV7lifbYNqctcPXRPqEOKiDy5KgSPriFzrrPUbwrv/tnXHZq7hFVPCMUYFBS9QJts4r5FOYTqAfvtw==",
+      "version": "6.1.6",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.6.tgz",
+      "integrity": "sha512-AsYGEHKVHy082RST3RBrIiOZX6VXNy6qYSYtf6TwOwmF/YV+/ASaB1TqVO/jP658ML106nNcjUM0fTkbm9UXRA==",
       "requires": {
         "@stencil/core": "^2.14.2",
         "ionicons": "^6.0.0",
@@ -4511,11 +4511,11 @@
       }
     },
     "@ionic/react": {
-      "version": "6.1.5",
-      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-6.1.5.tgz",
-      "integrity": "sha512-AcsMiNziXgehXG62yIDQFkCCtMwjiQF2V5OS2c6SIrJjrxR9ZTtCZWThL19/thF/PZys5pFN0ue8nuHKggG9Zw==",
+      "version": "6.1.6",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-6.1.6.tgz",
+      "integrity": "sha512-V/NxjN7VbGrFrez90g89Q1HVXcGlLEexGCtVeWhbK80h1lzGy2FMzT4BBW1qTvMGOZz2Umdoj+R1wcK91BbiJQ==",
       "requires": {
-        "@ionic/core": "^6.1.5",
+        "@ionic/core": "^6.1.6",
         "ionicons": "^6.0.0",
         "tslib": "*"
       }
diff --git a/packages/react-router/package.json b/packages/react-router/package.json
index e436dfb129..071aa0e11a 100644
--- a/packages/react-router/package.json
+++ b/packages/react-router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/react-router",
-  "version": "6.1.5",
+  "version": "6.1.6",
   "description": "React Router wrapper for @ionic/react",
   "keywords": [
     "ionic",
@@ -37,7 +37,7 @@
     "dist/"
   ],
   "dependencies": {
-    "@ionic/react": "^6.1.5",
+    "@ionic/react": "^6.1.6",
     "tslib": "*"
   },
   "peerDependencies": {
diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
index cee0b95afe..21a4fb272f 100644
--- a/packages/react/CHANGELOG.md
+++ b/packages/react/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.1.6](https://github.com/ionic-team/ionic/compare/v6.1.5...v6.1.6) (2022-05-18)
+
+**Note:** Version bump only for package @ionic/react
+
+
+
+
+
 ## [6.1.5](https://github.com/ionic-team/ionic/compare/v6.1.4...v6.1.5) (2022-05-11)
 
 **Note:** Version bump only for package @ionic/react
diff --git a/packages/react/package-lock.json b/packages/react/package-lock.json
index 08730d399b..004f9c97fb 100644
--- a/packages/react/package-lock.json
+++ b/packages/react/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/react",
-  "version": "6.1.5",
+  "version": "6.1.6",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/react",
-      "version": "6.1.5",
+      "version": "6.1.6",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^6.1.5",
+        "@ionic/core": "^6.1.6",
         "ionicons": "^6.0.0",
         "tslib": "*"
       },
@@ -607,9 +607,9 @@
       }
     },
     "node_modules/@ionic/core": {
-      "version": "6.1.5",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.5.tgz",
-      "integrity": "sha512-YEpFheFDGV7lifbYNqctcPXRPqEOKiDy5KgSPriFzrrPUbwrv/tnXHZq7hFVPCMUYFBS9QJts4r5FOYTqAfvtw==",
+      "version": "6.1.6",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.6.tgz",
+      "integrity": "sha512-AsYGEHKVHy082RST3RBrIiOZX6VXNy6qYSYtf6TwOwmF/YV+/ASaB1TqVO/jP658ML106nNcjUM0fTkbm9UXRA==",
       "dependencies": {
         "@stencil/core": "^2.14.2",
         "ionicons": "^6.0.0",
@@ -9534,9 +9534,9 @@
       }
     },
     "@ionic/core": {
-      "version": "6.1.5",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.5.tgz",
-      "integrity": "sha512-YEpFheFDGV7lifbYNqctcPXRPqEOKiDy5KgSPriFzrrPUbwrv/tnXHZq7hFVPCMUYFBS9QJts4r5FOYTqAfvtw==",
+      "version": "6.1.6",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.6.tgz",
+      "integrity": "sha512-AsYGEHKVHy082RST3RBrIiOZX6VXNy6qYSYtf6TwOwmF/YV+/ASaB1TqVO/jP658ML106nNcjUM0fTkbm9UXRA==",
       "requires": {
         "@stencil/core": "^2.14.2",
         "ionicons": "^6.0.0",
diff --git a/packages/react/package.json b/packages/react/package.json
index 486888fcac..ac18dd07b6 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/react",
-  "version": "6.1.5",
+  "version": "6.1.6",
   "description": "React specific wrapper for @ionic/core",
   "keywords": [
     "ionic",
@@ -41,7 +41,7 @@
     "css/"
   ],
   "dependencies": {
-    "@ionic/core": "^6.1.5",
+    "@ionic/core": "^6.1.6",
     "ionicons": "^6.0.0",
     "tslib": "*"
   },
diff --git a/packages/vue-router/CHANGELOG.md b/packages/vue-router/CHANGELOG.md
index 23046eaca3..951c865869 100644
--- a/packages/vue-router/CHANGELOG.md
+++ b/packages/vue-router/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.1.6](https://github.com/ionic-team/ionic/compare/v6.1.5...v6.1.6) (2022-05-18)
+
+**Note:** Version bump only for package @ionic/vue-router
+
+
+
+
+
 ## [6.1.5](https://github.com/ionic-team/ionic/compare/v6.1.4...v6.1.5) (2022-05-11)
 
 **Note:** Version bump only for package @ionic/vue-router
diff --git a/packages/vue-router/package-lock.json b/packages/vue-router/package-lock.json
index af3aab068c..9bf4d299ce 100644
--- a/packages/vue-router/package-lock.json
+++ b/packages/vue-router/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/vue-router",
-  "version": "6.1.5",
+  "version": "6.1.6",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/vue-router",
-      "version": "6.1.5",
+      "version": "6.1.6",
       "license": "MIT",
       "dependencies": {
-        "@ionic/vue": "^6.1.5"
+        "@ionic/vue": "^6.1.6"
       },
       "devDependencies": {
         "@types/jest": "^26.0.13",
@@ -563,9 +563,9 @@
       "license": "MIT"
     },
     "node_modules/@ionic/core": {
-      "version": "6.1.5",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.5.tgz",
-      "integrity": "sha512-YEpFheFDGV7lifbYNqctcPXRPqEOKiDy5KgSPriFzrrPUbwrv/tnXHZq7hFVPCMUYFBS9QJts4r5FOYTqAfvtw==",
+      "version": "6.1.6",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.6.tgz",
+      "integrity": "sha512-AsYGEHKVHy082RST3RBrIiOZX6VXNy6qYSYtf6TwOwmF/YV+/ASaB1TqVO/jP658ML106nNcjUM0fTkbm9UXRA==",
       "dependencies": {
         "@stencil/core": "^2.14.2",
         "ionicons": "^6.0.0",
@@ -573,11 +573,11 @@
       }
     },
     "node_modules/@ionic/vue": {
-      "version": "6.1.5",
-      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-6.1.5.tgz",
-      "integrity": "sha512-vMoDr4k5Jvo2Ne5DERaTnoOJObYw/tBGYXJK2hXAdCLDw+h4q0ZLVF2E5Dxs7BYU0hMCRBWmG8rRQY3bSeSr6A==",
+      "version": "6.1.6",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-6.1.6.tgz",
+      "integrity": "sha512-j0dELNjYTropC7UiZsgy3UN9mnQhXLD2Od/W92SQqKXx4tbvXOM7NLYuTrio7u2oZVagKnXmK19dpurp6Q0M0Q==",
       "dependencies": {
-        "@ionic/core": "^6.1.5",
+        "@ionic/core": "^6.1.6",
         "ionicons": "^6.0.0"
       }
     },
@@ -6630,9 +6630,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "6.1.5",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.5.tgz",
-      "integrity": "sha512-YEpFheFDGV7lifbYNqctcPXRPqEOKiDy5KgSPriFzrrPUbwrv/tnXHZq7hFVPCMUYFBS9QJts4r5FOYTqAfvtw==",
+      "version": "6.1.6",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.6.tgz",
+      "integrity": "sha512-AsYGEHKVHy082RST3RBrIiOZX6VXNy6qYSYtf6TwOwmF/YV+/ASaB1TqVO/jP658ML106nNcjUM0fTkbm9UXRA==",
       "requires": {
         "@stencil/core": "^2.14.2",
         "ionicons": "^6.0.0",
@@ -6640,11 +6640,11 @@
       }
     },
     "@ionic/vue": {
-      "version": "6.1.5",
-      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-6.1.5.tgz",
-      "integrity": "sha512-vMoDr4k5Jvo2Ne5DERaTnoOJObYw/tBGYXJK2hXAdCLDw+h4q0ZLVF2E5Dxs7BYU0hMCRBWmG8rRQY3bSeSr6A==",
+      "version": "6.1.6",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-6.1.6.tgz",
+      "integrity": "sha512-j0dELNjYTropC7UiZsgy3UN9mnQhXLD2Od/W92SQqKXx4tbvXOM7NLYuTrio7u2oZVagKnXmK19dpurp6Q0M0Q==",
       "requires": {
-        "@ionic/core": "^6.1.5",
+        "@ionic/core": "^6.1.6",
         "ionicons": "^6.0.0"
       }
     },
diff --git a/packages/vue-router/package.json b/packages/vue-router/package.json
index 19f0b96fe1..1919974aab 100644
--- a/packages/vue-router/package.json
+++ b/packages/vue-router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/vue-router",
-  "version": "6.1.5",
+  "version": "6.1.6",
   "description": "Vue Router integration for @ionic/vue",
   "scripts": {
     "prepublishOnly": "npm run build",
@@ -44,7 +44,7 @@
   },
   "homepage": "https://github.com/ionic-team/ionic#readme",
   "dependencies": {
-    "@ionic/vue": "^6.1.5"
+    "@ionic/vue": "^6.1.6"
   },
   "devDependencies": {
     "@types/jest": "^26.0.13",
diff --git a/packages/vue/CHANGELOG.md b/packages/vue/CHANGELOG.md
index 8736a9778e..50d124aa70 100644
--- a/packages/vue/CHANGELOG.md
+++ b/packages/vue/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.1.6](https://github.com/ionic-team/ionic/compare/v6.1.5...v6.1.6) (2022-05-18)
+
+**Note:** Version bump only for package @ionic/vue
+
+
+
+
+
 ## [6.1.5](https://github.com/ionic-team/ionic/compare/v6.1.4...v6.1.5) (2022-05-11)
 
 **Note:** Version bump only for package @ionic/vue
diff --git a/packages/vue/package-lock.json b/packages/vue/package-lock.json
index dacbe504f6..2eec5bc4f1 100644
--- a/packages/vue/package-lock.json
+++ b/packages/vue/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/vue",
-  "version": "6.1.5",
+  "version": "6.1.6",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/vue",
-      "version": "6.1.5",
+      "version": "6.1.6",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^6.1.5",
+        "@ionic/core": "^6.1.6",
         "ionicons": "^6.0.0"
       },
       "devDependencies": {
@@ -53,9 +53,9 @@
       }
     },
     "node_modules/@ionic/core": {
-      "version": "6.1.5",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.5.tgz",
-      "integrity": "sha512-YEpFheFDGV7lifbYNqctcPXRPqEOKiDy5KgSPriFzrrPUbwrv/tnXHZq7hFVPCMUYFBS9QJts4r5FOYTqAfvtw==",
+      "version": "6.1.6",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.6.tgz",
+      "integrity": "sha512-AsYGEHKVHy082RST3RBrIiOZX6VXNy6qYSYtf6TwOwmF/YV+/ASaB1TqVO/jP658ML106nNcjUM0fTkbm9UXRA==",
       "dependencies": {
         "@stencil/core": "^2.14.2",
         "ionicons": "^6.0.0",
@@ -633,9 +633,9 @@
       }
     },
     "@ionic/core": {
-      "version": "6.1.5",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.5.tgz",
-      "integrity": "sha512-YEpFheFDGV7lifbYNqctcPXRPqEOKiDy5KgSPriFzrrPUbwrv/tnXHZq7hFVPCMUYFBS9QJts4r5FOYTqAfvtw==",
+      "version": "6.1.6",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.6.tgz",
+      "integrity": "sha512-AsYGEHKVHy082RST3RBrIiOZX6VXNy6qYSYtf6TwOwmF/YV+/ASaB1TqVO/jP658ML106nNcjUM0fTkbm9UXRA==",
       "requires": {
         "@stencil/core": "^2.14.2",
         "ionicons": "^6.0.0",
diff --git a/packages/vue/package.json b/packages/vue/package.json
index 8def4c6433..ed0418d265 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/vue",
-  "version": "6.1.5",
+  "version": "6.1.6",
   "description": "Vue specific wrapper for @ionic/core",
   "scripts": {
     "prepublishOnly": "npm run build",
@@ -60,7 +60,7 @@
     "vue-router": "^4.0.0-rc.4"
   },
   "dependencies": {
-    "@ionic/core": "^6.1.5",
+    "@ionic/core": "^6.1.6",
     "ionicons": "^6.0.0"
   },
   "vetur": {