From b12cffb8ca09e2dbd3d4e827a4b20d599c77da90 Mon Sep 17 00:00:00 2001 From: VitalCheffe Date: Mon, 30 Mar 2026 22:43:45 +0000 Subject: [PATCH] fix(modal): prevent double safe-area in fullscreen modals with ion-content MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit applyFullscreenSafeArea() was applying wrapper-level padding-bottom for modals with ion-content but no ion-footer. Since ion-content already handles bottom safe-area internally via its scroll container, this created double compensation — visible as a white gap at the bottom of fullscreen modals on iOS devices with home indicators. Fix: skip wrapper padding when ion-content is present, since it already manages its own safe-area insets. Only apply wrapper padding for custom modals with raw HTML that lack ion-content. Fixes #31015 --- core/src/components/modal/modal.tsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/core/src/components/modal/modal.tsx b/core/src/components/modal/modal.tsx index 9ba3ecbf009..e4b7b580648 100644 --- a/core/src/components/modal/modal.tsx +++ b/core/src/components/modal/modal.tsx @@ -1522,10 +1522,13 @@ export class Modal implements ComponentInterface, OverlayInterface { } } - // Only apply wrapper padding for standard Ionic layouts (has ion-content - // but no ion-footer). Custom modals with raw HTML are fully - // developer-controlled and should not be modified. - if (!hasContent || hasFooter) return; + // Only apply wrapper padding when ion-content is absent. When + // ion-content is present, it already handles bottom safe-area via + // its own scroll container — applying it again at the wrapper level + // creates double compensation (visible as a white gap on iOS). + // Custom modals with raw HTML are fully developer-controlled and + // should not be modified. + if (hasContent || hasFooter) return; // Reduce wrapper height by safe-area and add equivalent padding so the // total visual size stays the same but the flex content area shrinks.