diff --git a/docs/src/app/(private)/experiments/scroll-area/scroll-area-inset.tsx b/docs/src/app/(private)/experiments/scroll-area/scroll-area-inset.tsx
index 7e740b020b..380de78b59 100644
--- a/docs/src/app/(private)/experiments/scroll-area/scroll-area-inset.tsx
+++ b/docs/src/app/(private)/experiments/scroll-area/scroll-area-inset.tsx
@@ -5,9 +5,34 @@ import styles from './scroll-area-inset.module.css';
 
 export default function ScrollAreaInset() {
   return (
-    <DirectionProvider direction="rtl">
-      <p>Scroll content is not clipped by inset scrollbars (user-defined paddings)</p>
-      <ScrollArea.Root className={styles.Root} style={{ direction: 'rtl' }}>
+    <div>
+      <h2>RTL</h2>
+      <DirectionProvider direction="rtl">
+        <p>Scroll content is not clipped by inset scrollbars (user-defined paddings)</p>
+        <ScrollArea.Root className={styles.Root} style={{ direction: 'rtl' }}>
+          <ScrollArea.Viewport className={styles.Viewport}>
+            <div className={styles.Content}>
+              <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
+                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+                exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
+                irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+                pariatur.
+              </p>
+            </div>
+          </ScrollArea.Viewport>
+          <ScrollArea.Scrollbar className={styles.Scrollbar} orientation="vertical">
+            <ScrollArea.Thumb className={styles.Thumb} />
+          </ScrollArea.Scrollbar>
+          <ScrollArea.Scrollbar className={styles.Scrollbar} orientation="horizontal">
+            <ScrollArea.Thumb className={styles.Thumb} />
+          </ScrollArea.Scrollbar>
+          <ScrollArea.Corner />
+        </ScrollArea.Root>
+      </DirectionProvider>
+
+      <h2>LTR</h2>
+      <ScrollArea.Root className={styles.Root}>
         <ScrollArea.Viewport className={styles.Viewport}>
           <div className={styles.Content}>
             <p>
@@ -26,6 +51,6 @@ export default function ScrollAreaInset() {
         </ScrollArea.Scrollbar>
         <ScrollArea.Corner />
       </ScrollArea.Root>
-    </DirectionProvider>
+    </div>
   );
 }
diff --git a/packages/react/src/scroll-area/utils/getOffset.ts b/packages/react/src/scroll-area/utils/getOffset.ts
index a92e8e07da..64f5c62799 100644
--- a/packages/react/src/scroll-area/utils/getOffset.ts
+++ b/packages/react/src/scroll-area/utils/getOffset.ts
@@ -8,8 +8,15 @@ export function getOffset(
   }
 
   const styles = getComputedStyle(element);
-  const start = axis === 'x' ? 'Left' : 'Top';
-  const end = axis === 'x' ? 'Right' : 'Bottom';
+  const propAxis = axis === 'x' ? 'Inline' : 'Block';
 
-  return parseFloat(styles[`${prop}${start}`]) + parseFloat(styles[`${prop}${end}`]);
+  // Safari misreports `marginInlineEnd` in RTL.
+  // We have to assume the start/end values are symmetrical, which is likely.
+  if (axis === 'x' && prop === 'margin') {
+    return parseFloat(styles[`${prop}InlineStart`]) * 2;
+  }
+
+  return (
+    parseFloat(styles[`${prop}${propAxis}Start`]) + parseFloat(styles[`${prop}${propAxis}End`])
+  );
 }