From 0cd452f9690ea1608c1bdebc3c0e798cc13a3512 Mon Sep 17 00:00:00 2001
From: Felix Habib <fhabib@seek.com.au>
Date: Mon, 9 Dec 2024 11:14:58 +1100
Subject: [PATCH] Adjust `maskOverflow` position calculations

---
 .../private/ScrollContainer/ScrollContainer.tsx      | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/braid-design-system/src/lib/components/private/ScrollContainer/ScrollContainer.tsx b/packages/braid-design-system/src/lib/components/private/ScrollContainer/ScrollContainer.tsx
index df48295de2c..3f147274ed3 100644
--- a/packages/braid-design-system/src/lib/components/private/ScrollContainer/ScrollContainer.tsx
+++ b/packages/braid-design-system/src/lib/components/private/ScrollContainer/ScrollContainer.tsx
@@ -8,16 +8,20 @@ import { throttle } from 'throttle-debounce';
 
 import * as styles from './ScrollContainer.css';
 
+const scrollOffset = 2; // 2 instead of 1 to account for rounding errors in some browsers
+
 const maskOverflow = (
   element: HTMLElement,
   direction: keyof typeof styles.direction,
 ) => {
-  const atTop = element.scrollTop === 0;
+  const atTop = element.scrollTop <= 0;
   const atBottom =
-    element.scrollHeight - element.offsetHeight - element.scrollTop < 1;
-  const atLeft = element.scrollLeft === 0;
+    element.scrollHeight - element.offsetHeight - element.scrollTop <
+    scrollOffset;
+  const atLeft = element.scrollLeft <= 0;
   const atRight =
-    element.scrollWidth - element.offsetWidth - element.scrollLeft < 1;
+    element.scrollWidth - element.offsetWidth - element.scrollLeft <
+    scrollOffset;
 
   if (direction === 'vertical' || direction === 'all') {
     element.classList[atTop ? 'remove' : 'add'](styles.maskTop);