fix(modal): dynamically handle safe-area insets for edge-to-edge mode

Author: ShaneK

core/src/components/modal/modal.tsx

@@ -102,6 +102,8 @@ export class Modal implements ComponentInterface, OverlayInterface {
   private cachedOriginalParent?: HTMLElement;
   // Cached ion-page ancestor for child route passthrough
   private cachedPageParent?: HTMLElement | null;
+  // Whether to skip coordinate-based safe-area detection (for fullscreen phone modals)
+  private skipSafeAreaCoordinateDetection = false;
 
   lastFocus?: HTMLElement;
   animation?: Animation;
@@ -877,42 +879,61 @@ export class Modal implements ComponentInterface, OverlayInterface {
     const isCardModal = presentingElement !== undefined;
     const isTablet = window.innerWidth >= 768;
 
-    // Sheet modals: always touch bottom, top depends on breakpoint
+    // Sheet modals always touch bottom edge, never top/left/right
     if (isSheetModal) {
       style.setProperty('--ion-safe-area-top', '0px');
-      // Don't override bottom - sheet always touches bottom
       style.setProperty('--ion-safe-area-left', '0px');
       style.setProperty('--ion-safe-area-right', '0px');
       return;
     }
 
-    // Card modals are inset from edges (rounded corners), no safe areas needed
+    // Card modals are inset from all edges
     if (isCardModal) {
-      style.setProperty('--ion-safe-area-top', '0px');
-      style.setProperty('--ion-safe-area-bottom', '0px');
-      style.setProperty('--ion-safe-area-left', '0px');
-      style.setProperty('--ion-safe-area-right', '0px');
+      this.zeroAllSafeAreas();
       return;
     }
 
-    // Phone modals are fullscreen, need all safe areas
+    // Phone-sized fullscreen modals inherit safe areas and use wrapper padding
     if (!isTablet) {
-      // Don't set any overrides - inherit from :root
+      this.applyFullscreenSafeArea();
       return;
     }
 
-    // Default tablet modal: centered dialog, no safe areas needed
-    // Check for fullscreen override via CSS custom properties
+    // Check if tablet modal is fullscreen via CSS custom properties
     const computedStyle = getComputedStyle(this.el);
     const width = computedStyle.getPropertyValue('--width').trim();
     const height = computedStyle.getPropertyValue('--height').trim();
+    const isFullscreen = width === '100%' && height === '100%';
 
-    if (width === '100%' && height === '100%') {
-      // Fullscreen modal - need safe areas, don't override
-      return;
+    if (isFullscreen) {
+      this.applyFullscreenSafeArea();
+    } else {
+      // Centered dialog doesn't touch edges
+      this.zeroAllSafeAreas();
+    }
+  }
+
+  /**
+   * Applies safe-area handling for fullscreen modals.
+   * Adds wrapper padding when no footer is present to prevent
+   * content from overlapping system navigation areas.
+   */
+  private applyFullscreenSafeArea() {
+    this.skipSafeAreaCoordinateDetection = true;
+
+    const hasFooter = this.el.querySelector('ion-footer') !== null;
+    if (!hasFooter && this.wrapperEl) {
+      this.wrapperEl.style.setProperty('padding-bottom', 'var(--ion-safe-area-bottom, 0px)');
+      this.wrapperEl.style.setProperty('box-sizing', 'border-box');
     }
+  }
 
-    // Centered dialog - zero out all safe areas
+  /**
+   * Sets all safe-area CSS variables to 0px for modals that
+   * don't touch screen edges.
+   */
+  private zeroAllSafeAreas() {
+    const style = this.el.style;
     style.setProperty('--ion-safe-area-top', '0px');
     style.setProperty('--ion-safe-area-bottom', '0px');
     style.setProperty('--ion-safe-area-left', '0px');
@@ -921,22 +942,27 @@ export class Modal implements ComponentInterface, OverlayInterface {
 
   /**
    * Updates safe-area CSS variable overrides based on whether the modal
-   * is touching each edge of the viewport. This is called after animation
+   * is touching each edge of the viewport. Called after animation
    * and during gestures to handle dynamic position changes.
    */
   private updateSafeAreaOverrides() {
+    if (this.skipSafeAreaCoordinateDetection) {
+      return;
+    }
+
     const wrapper = this.wrapperEl;
-    if (!wrapper) return;
+    if (!wrapper) {
+      return;
+    }
 
     const rect = wrapper.getBoundingClientRect();
-    const threshold = 2; // Account for subpixel rendering
+    const threshold = 2;
 
     const touchingTop = rect.top <= threshold;
     const touchingBottom = rect.bottom >= window.innerHeight - threshold;
     const touchingLeft = rect.left <= threshold;
     const touchingRight = rect.right >= window.innerWidth - threshold;
 
-    // Remove override when touching edge (allow inheritance), set to 0 when not touching
     const style = this.el.style;
     touchingTop ? style.removeProperty('--ion-safe-area-top') : style.setProperty('--ion-safe-area-top', '0px');
     touchingBottom
@@ -1058,6 +1084,8 @@ export class Modal implements ComponentInterface, OverlayInterface {
     }
     this.currentBreakpoint = undefined;
     this.animation = undefined;
+    // Reset safe-area detection flag for potential re-presentation
+    this.skipSafeAreaCoordinateDetection = false;
 
     unlock();
 

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

@@ -61,6 +61,8 @@ export const iosEnterAnimation = (baseEl: HTMLElement, opts?: any): Animation =>
     top,
     left,
     bottom,
+    checkSafeAreaTop,
+    checkSafeAreaBottom,
     checkSafeAreaLeft,
     checkSafeAreaRight,
     arrowTop,
@@ -118,23 +120,39 @@ export const iosEnterAnimation = (baseEl: HTMLElement, opts?: any): Animation =>
         baseEl.classList.add('popover-bottom');
       }
 
-      if (bottom !== undefined) {
-        contentEl.style.setProperty('bottom', `${bottom}px`);
-      }
-
+      /**
+       * Safe area CSS variable adjustments.
+       * When the popover is positioned near an edge, we add the corresponding
+       * 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)';
 
+      let topValue = `${top}px`;
+      let bottomValue = bottom !== undefined ? `${bottom}px` : undefined;
       let leftValue = `${left}px`;
 
+      if (checkSafeAreaTop) {
+        topValue = `${top}px${safeAreaTop}`;
+      }
+      if (checkSafeAreaBottom && bottomValue !== undefined) {
+        bottomValue = `${bottom}px${safeAreaBottom}`;
+      }
       if (checkSafeAreaLeft) {
         leftValue = `${left}px${safeAreaLeft}`;
       }
       if (checkSafeAreaRight) {
         leftValue = `${left}px${safeAreaRight}`;
       }
 
-      contentEl.style.setProperty('top', `calc(${top}px + var(--offset-y, 0))`);
+      if (bottomValue !== undefined) {
+        contentEl.style.setProperty('bottom', `calc(${bottomValue})`);
+      }
+
+      contentEl.style.setProperty('top', `calc(${topValue} + var(--offset-y, 0))`);
       contentEl.style.setProperty('left', `calc(${leftValue} + var(--offset-x, 0))`);
       contentEl.style.setProperty('transform-origin', `${originY} ${originX}`);
 

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

@@ -47,7 +47,7 @@ export const mdEnterAnimation = (baseEl: HTMLElement, opts?: any): Animation =>
 
   const padding = size === 'cover' ? 0 : POPOVER_MD_BODY_PADDING;
 
-  const { originX, originY, top, left, bottom } = calculateWindowAdjustment(
+  const { originX, originY, top, left, bottom, checkSafeAreaTop, checkSafeAreaBottom } = calculateWindowAdjustment(
     side,
     results.top,
     results.left,
@@ -62,6 +62,25 @@ export const mdEnterAnimation = (baseEl: HTMLElement, opts?: any): Animation =>
     results.referenceCoordinates
   );
 
+  /**
+   * Safe area CSS variable adjustments.
+   * When the popover is positioned near an edge, we add the corresponding
+   * 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)';
+
+  let topValue = `${top}px`;
+  let bottomValue = bottom !== undefined ? `${bottom}px` : undefined;
+
+  if (checkSafeAreaTop) {
+    topValue = `${top}px${safeAreaTop}`;
+  }
+  if (checkSafeAreaBottom && bottomValue !== undefined) {
+    bottomValue = `${bottom}px${safeAreaBottom}`;
+  }
+
   const baseAnimation = createAnimation();
   const backdropAnimation = createAnimation();
   const wrapperAnimation = createAnimation();
@@ -81,13 +100,13 @@ export const mdEnterAnimation = (baseEl: HTMLElement, opts?: any): Animation =>
   contentAnimation
     .addElement(contentEl)
     .beforeStyles({
-      top: `calc(${top}px + var(--offset-y, 0px))`,
+      top: `calc(${topValue} + var(--offset-y, 0px))`,
       left: `calc(${left}px + var(--offset-x, 0px))`,
       'transform-origin': `${originY} ${originX}`,
     })
     .beforeAddWrite(() => {
-      if (bottom !== undefined) {
-        contentEl.style.setProperty('bottom', `${bottom}px`);
+      if (bottomValue !== undefined) {
+        contentEl.style.setProperty('bottom', `calc(${bottomValue})`);
       }
     })
     .fromTo('transform', 'scale(0.8)', 'scale(1)');