diff --git a/core/src/components/fab/fab.scss b/core/src/components/fab/fab.scss
index 73fc4b375d2..227c4b0f37e 100644
--- a/core/src/components/fab/fab.scss
+++ b/core/src/components/fab/fab.scss
@@ -23,15 +23,29 @@
 }
 
 :host(.fab-horizontal-start) {
-  @include position-horizontal(
-    calc(#{$fab-content-margin} + var(--ion-safe-area-left, 0px)), null
-  );
+  /* stylelint-disable */
+  @include ltr() {
+    left: calc(#{$fab-content-margin} + var(--ion-safe-area-left, 0px));
+  }
+
+  @include rtl() {
+    right: calc(#{$fab-content-margin} + var(--ion-safe-area-right, 0px));
+    left: unset;
+  }
+  /* stylelint-enable */
 }
 
 :host(.fab-horizontal-end) {
-  @include position-horizontal(
-    null, calc(#{$fab-content-margin} + var(--ion-safe-area-right, 0px))
-  );
+  /* stylelint-disable */
+  @include ltr() {
+    right: calc(#{$fab-content-margin} + var(--ion-safe-area-right, 0px));
+  }
+
+  @include rtl() {
+    left: calc(#{$fab-content-margin} + var(--ion-safe-area-left, 0px));
+    right: unset;
+  }
+  /* stylelint-enable */
 }
 
 
diff --git a/core/src/components/fab/test/safe-area/fab.e2e.ts b/core/src/components/fab/test/safe-area/fab.e2e.ts
new file mode 100644
index 00000000000..cde83ec4ccf
--- /dev/null
+++ b/core/src/components/fab/test/safe-area/fab.e2e.ts
@@ -0,0 +1,72 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('fab: safe area'), () => {
+    test('should ignore document direction in safe area positioning for start-positioned fab', async ({ page }) => {
+      await page.setContent(
+        `
+          <style>
+            :root {
+              --ion-safe-area-left: 40px;
+              --ion-safe-area-right: 20px;
+            }
+          </style>
+
+          <ion-content>
+            <ion-fab vertical="center" horizontal="start">
+              <ion-fab-button>
+                <ion-icon name="add"></ion-icon>
+              </ion-fab-button>
+            </ion-fab>
+          </ion-content>
+        `,
+        config
+      );
+
+      /**
+       * We need to capture the entire page to check the fab's position,
+       * but we don't need much extra white space.
+       */
+      await page.setViewportSize({
+        width: 200,
+        height: 200,
+      });
+
+      await expect(page).toHaveScreenshot(screenshot('fab-safe-area-horizontal-start'));
+    });
+
+    test('should ignore document direction in safe area positioning for end-positioned fab', async ({ page }) => {
+      await page.setContent(
+        `
+          <style>
+            :root {
+              --ion-safe-area-left: 40px;
+              --ion-safe-area-right: 20px;
+            }
+          </style>
+
+          <ion-content>
+            <ion-fab vertical="center" horizontal="end">
+              <ion-fab-button>
+                <ion-icon name="add"></ion-icon>
+              </ion-fab-button>
+            </ion-fab>
+          </ion-content>
+        `,
+        config
+      );
+
+      /**
+       * We need to capture the entire page to check the fab's position,
+       * but we don't need much extra white space.
+       */
+      await page.setViewportSize({
+        width: 200,
+        height: 200,
+      });
+
+      await expect(page).toHaveScreenshot(screenshot('fab-safe-area-horizontal-end'));
+    });
+  });
+});
diff --git a/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-end-md-ltr-Mobile-Chrome-linux.png b/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-end-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..531c61bf422
Binary files /dev/null and b/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-end-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-end-md-ltr-Mobile-Firefox-linux.png b/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-end-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..d46960e64ed
Binary files /dev/null and b/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-end-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-end-md-ltr-Mobile-Safari-linux.png b/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-end-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..06502d85e14
Binary files /dev/null and b/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-end-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-end-md-rtl-Mobile-Chrome-linux.png b/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-end-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..cbb0dce57fd
Binary files /dev/null and b/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-end-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-end-md-rtl-Mobile-Firefox-linux.png b/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-end-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..4c35d2c98b4
Binary files /dev/null and b/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-end-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-end-md-rtl-Mobile-Safari-linux.png b/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-end-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..f049c7f63b1
Binary files /dev/null and b/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-end-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-start-md-ltr-Mobile-Chrome-linux.png b/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-start-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..cbb0dce57fd
Binary files /dev/null and b/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-start-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-start-md-ltr-Mobile-Firefox-linux.png b/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-start-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..4c35d2c98b4
Binary files /dev/null and b/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-start-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-start-md-ltr-Mobile-Safari-linux.png b/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-start-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..f049c7f63b1
Binary files /dev/null and b/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-start-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-start-md-rtl-Mobile-Chrome-linux.png b/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-start-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..531c61bf422
Binary files /dev/null and b/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-start-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-start-md-rtl-Mobile-Firefox-linux.png b/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-start-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..d46960e64ed
Binary files /dev/null and b/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-start-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-start-md-rtl-Mobile-Safari-linux.png b/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-start-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..06502d85e14
Binary files /dev/null and b/core/src/components/fab/test/safe-area/fab.e2e.ts-snapshots/fab-safe-area-horizontal-start-md-rtl-Mobile-Safari-linux.png differ