🐛 Take the visual viewport into account for Safari when positioning t…

…he menu
teamleadercrm · Jan 9, 2024 · 44d20d8 · 44d20d8
1 parent d7e3063
commit 44d20d8
Showing 1 changed file with 16 additions and 8 deletions.
diff --git a/src/components/menu/Menu.tsx b/src/components/menu/Menu.tsx
@@ -122,31 +122,39 @@ const Menu = <S,>({
       const { top, left, height, width } = anchorElement.getBoundingClientRect();
       const { height: menuHeight, width: menuWidth } = menuRef.current.getBoundingClientRect();
 
+      let leftOffset = 0;
+      let topOffset = 0;
+
+      if (/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {
+        leftOffset = window.visualViewport?.offsetLeft || 0;
+        topOffset = window.visualViewport?.offsetTop || 0;
+      }
+
       if (positionState === POSITION.TOP_LEFT) {
         return {
-          top: top + height + 3,
-          left,
+          top: top + height + 3 + topOffset,
+          left: left + leftOffset,
         };
       }
 
       if (positionState === POSITION.TOP_RIGHT) {
         return {
-          top: top + height + 3,
-          left: left + width - menuWidth,
+          top: top + height + 3 + topOffset,
+          left: left + width - menuWidth + leftOffset,
         };
       }
 
       if (positionState === POSITION.BOTTOM_LEFT) {
         return {
-          top: -1 * (menuHeight + 3) + top,
-          left,
+          top: -1 * (menuHeight + 3) + top + topOffset,
+          left: left + leftOffset,
         };
       }
 
       if (positionState === POSITION.BOTTOM_RIGHT) {
         return {
-          top: -1 * (menuHeight + 3) + top,
-          left: left + width - menuWidth,
+          top: -1 * (menuHeight + 3) + top + topOffset,
+          left: left + width - menuWidth + leftOffset,
         };
       }
     }