MenuRenderer, OverflowMenu: Improve scroll fade effect in older brows…

…ers (#1664)
seek-oss · Dec 9, 2024 · 91df12c · 91df12c
1 parent e8eddf8
commit 91df12c
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/...ges/braid-design-system/src/lib/components/private/ScrollContainer/ScrollContainer.css.ts b/...ges/braid-design-system/src/lib/components/private/ScrollContainer/ScrollContainer.css.ts
@@ -7,6 +7,7 @@ import {
 
 export const container = style({
   WebkitOverflowScrolling: 'touch',
+  WebkitMaskComposite: 'destination-in', // Fallback for browsers that don't support mask-composite
   maskComposite: 'intersect',
 });
 

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
@@ -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);