Merge pull request #2837 from teamleadercrm/FRONT-626-fix-popover-pos…

…itioning-in-safar-after-pinch-and-zoom [FRONT-626] Fix popover positioning in Safari when zoomed by pinching
teamleadercrm · Jan 9, 2024 · 87793d6 · 87793d6
2 parents 05856a3 + ed53bbd
commit 87793d6
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 24 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,8 @@
 
 ### Fixed
 
+- `Popover` and `Menu`: Fixed positioning in Safari when zoomed in by pinching ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2837](https://github.com/teamleadercrm/ui/pull/2837)
+
 ## [25.0.3]
 
 ### Fixed

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,
         };
       }
     }

diff --git a/src/components/popover/positionCalculation.ts b/src/components/popover/positionCalculation.ts
@@ -131,22 +131,33 @@ const getPositionValues = ({
   anchorPosition,
   popoverDimensions,
   inputOffsetCorrection,
-}: DirectionPositionValues) =>
-  direction === DIRECTION_NORTH || direction === DIRECTION_SOUTH
-    ? getVerticalDirectionPositionValues({
-        direction,
-        position,
-        anchorPosition,
-        popoverDimensions,
-        inputOffsetCorrection,
-      })
-    : getHorizontalDirectionPositionValues({
-        direction,
-        position,
-        anchorPosition,
-        popoverDimensions,
-        inputOffsetCorrection,
-      });
+}: DirectionPositionValues) => {
+  const positionValues =
+    direction === DIRECTION_NORTH || direction === DIRECTION_SOUTH
+      ? getVerticalDirectionPositionValues({
+          direction,
+          position,
+          anchorPosition,
+          popoverDimensions,
+          inputOffsetCorrection,
+        })
+      : getHorizontalDirectionPositionValues({
+          direction,
+          position,
+          anchorPosition,
+          popoverDimensions,
+          inputOffsetCorrection,
+        });
+
+  // For Safari we need to take the visual viewport into account
+  // https://github.com/floating-ui/floating-ui/pull/1099/files#r418947428
+  if (/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {
+    positionValues.left += window.visualViewport?.offsetLeft || 0;
+    positionValues.top += window.visualViewport?.offsetTop || 0;
+  }
+
+  return positionValues;
+};
 
 const isInViewport = (direction: Direction, anchorPosition: PositionValues, popoverDimensions: DimensionValues) => {
   switch (direction) {