Trying to improve accuracy

Author: ShaneK

core/src/components/popover/animations/ios.enter.ts

@@ -133,10 +133,10 @@ export const iosEnterAnimation = (baseEl: HTMLElement, opts?: any): Animation =>
        * safe-area inset to ensure the popover doesn't overlap with system UI
        * (status bars, home indicators, navigation bars on Android API 36+, etc.)
        */
-      const safeAreaTop = ' + var(--ion-safe-area-top, 0)';
-      const safeAreaBottom = ' + var(--ion-safe-area-bottom, 0)';
-      const safeAreaLeft = ' + var(--ion-safe-area-left, 0)';
-      const safeAreaRight = ' - var(--ion-safe-area-right, 0)';
+      const safeAreaTop = ' + var(--ion-safe-area-top, 0px)';
+      const safeAreaBottom = ' + var(--ion-safe-area-bottom, 0px)';
+      const safeAreaLeft = ' + var(--ion-safe-area-left, 0px)';
+      const safeAreaRight = ' - var(--ion-safe-area-right, 0px)';
 
       let topValue = `${top}px`;
       let bottomValue = bottom !== undefined ? `${bottom}px` : undefined;
@@ -159,20 +159,27 @@ export const iosEnterAnimation = (baseEl: HTMLElement, opts?: any): Animation =>
         contentEl.style.setProperty('bottom', `calc(${bottomValue})`);
         /**
          * When both top and bottom are explicitly constrained (isFullyConstrained),
-         * we need to override the height: var(--height) style to allow the
-         * top/bottom constraint to determine the height.
+         * we need to explicitly calculate the height to ensure the popover
+         * fits within the safe area boundaries.
          *
-         * We only do this when fully constrained because setting height: unset
-         * when only bottom is set (without explicit top) would result in an
-         * incorrectly sized popover.
+         * Using CSS calc with 100vh minus top and bottom values ensures the
+         * popover height respects both safe areas. We also override max-height
+         * to prevent it from interfering with the calculated height.
          */
         if (isFullyConstrained) {
-          contentEl.style.setProperty('height', 'unset');
+          /**
+           * Wrap topValue and bottomValue in parentheses to ensure correct
+           * order of operations in the CSS calc. Without parentheses, the
+           * safe-area additions would have wrong signs.
+           */
+          const heightCalc = `calc(100vh - (${topValue}) - (${bottomValue}) - var(--offset-y, 0px))`;
+          contentEl.style.setProperty('height', heightCalc);
+          contentEl.style.setProperty('max-height', heightCalc);
         }
       }
 
-      contentEl.style.setProperty('top', `calc(${topValue} + var(--offset-y, 0))`);
-      contentEl.style.setProperty('left', `calc(${leftValue} + var(--offset-x, 0))`);
+      contentEl.style.setProperty('top', `calc(${topValue} + var(--offset-y, 0px))`);
+      contentEl.style.setProperty('left', `calc(${leftValue} + var(--offset-x, 0px))`);
       contentEl.style.setProperty('transform-origin', `${originY} ${originX}`);
 
       if (arrowEl !== null) {

core/src/components/popover/animations/md.enter.ts

@@ -137,15 +137,22 @@ export const mdEnterAnimation = (baseEl: HTMLElement, opts?: any): Animation =>
         contentEl.style.setProperty('bottom', `calc(${bottomValue})`);
         /**
          * When both top and bottom are explicitly constrained (isFullyConstrained),
-         * we need to override the height: var(--height) style to allow the
-         * top/bottom constraint to determine the height.
+         * we need to explicitly calculate the height to ensure the popover
+         * fits within the safe area boundaries.
          *
-         * We only do this when fully constrained because setting height: unset
-         * when only bottom is set (without explicit top) would result in an
-         * incorrectly sized popover.
+         * Using CSS calc with 100vh minus top and bottom values ensures the
+         * popover height respects both safe areas. We also override max-height
+         * to prevent it from interfering with the calculated height.
          */
         if (isFullyConstrained) {
-          contentEl.style.setProperty('height', 'unset');
+          /**
+           * Wrap topValue and bottomValue in parentheses to ensure correct
+           * order of operations in the CSS calc. Without parentheses, the
+           * safe-area additions would have wrong signs.
+           */
+          const heightCalc = `calc(100vh - (${topValue}) - (${bottomValue}) - var(--offset-y, 0px))`;
+          contentEl.style.setProperty('height', heightCalc);
+          contentEl.style.setProperty('max-height', heightCalc);
         }
       }
     })

core/src/components/popover/utils.ts

@@ -965,8 +965,13 @@ export const calculateWindowAdjustment = (
     /**
      * Set a bottom constraint to push the popover up out of the safe-area zone.
      * The animation will add the safe-area CSS variable to this value.
+     *
+     * We also set isFullyConstrained so that height: unset is applied,
+     * allowing the bottom constraint to actually take effect (otherwise
+     * the explicit height would override the bottom constraint).
      */
     bottom = bodyPadding;
+    isFullyConstrained = true;
   }
   if (top < safeAreaMargin) {
     checkSafeAreaTop = true;