bug: applyFullscreenSafeArea() shrinks fullscreen modal wrapper when ion-content exists without ion-footer (8.8.1 regression)

[a-hazaiti]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v8.x (8.8.1)

Current Behavior

After upgrading from @ionic/angular 8.7.17 to 8.8.1, fullscreen modals (presented via ModalController with cssClass: "fullscreen") that contain ion-content but no ion-footer display a white gap at the bottom on iOS devices with a home indicator (safe area).

This is caused by the new applyFullscreenSafeArea() method in modal.tsx (introduced in PR #30949, included in 8.8.1). The method contains this logic:

let hasContent = false;
let hasFooter = false;
for (const child of Array.from(el.children)) {
  if (child.tagName === 'ION-CONTENT') hasContent = true;
  if (child.tagName === 'ION-FOOTER') hasFooter = true;
  for (const grandchild of Array.from(child.children)) {
    if (grandchild.tagName === 'ION-CONTENT') hasContent = true;
    if (grandchild.tagName === 'ION-FOOTER') hasFooter = true;
  }
}

if (!hasContent || hasFooter) return;

wrapperEl.style.setProperty('height', 'calc(var(--height) - var(--ion-safe-area-bottom, 0px))');
wrapperEl.style.setProperty('padding-bottom', 'var(--ion-safe-area-bottom, 0px)');

When ion-content is present without ion-footer, the wrapper height is reduced by --ion-safe-area-bottom and equivalent padding is added. This creates a visible white gap at the bottom of the modal because the flex content area shrinks but the modal's visual boundary doesn't move.

This is a regression — the same templates worked correctly on 8.7.17.

Expected Behavior

Fullscreen modals with ion-content and no ion-footer should render identically to how they did in 8.7.x — filling the entire screen without a gap at the bottom. The content inside ion-content already handles its own safe-area padding via --ion-safe-area-bottom on the scroll container. Applying it a second time at the wrapper level causes double safe-area compensation.

Steps to Reproduce

1. Create an Ionic Angular app with @ionic/angular 8.8.1
2. Create a modal component with this template:

<ion-header>
  <ion-toolbar>
    <ion-title>Modal Title</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <p>Some content here</p>
</ion-content>

<!-- No ion-footer -->

3. Present it as a fullscreen modal:

const modal = await this.modalCtrl.create({
  component: MyModalComponent,
  cssClass: 'fullscreen'
});
await modal.present();

4. Run on an iOS device/simulator with a home indicator (iPhone X or later)
5. Observe a white gap at the bottom of the modal

Code Reproduction URL

Reproduction project can be provided upon request.

Ionic Info

Ionic:
   Ionic CLI       : 7.2.1
   Ionic Framework : @ionic/angular 8.8.1
   @angular/cli    : 21.3.1
   @ionic/angular-toolkit : 12.3.0

Capacitor:
   Capacitor CLI      : 8.1.0
   @capacitor/android : 8.1.0
   @capacitor/core    : 8.1.0
   @capacitor/ios     : 8.1.0

System:
   NodeJS : v22.17.0
   npm    : 10.9.2
   OS     : macOS

Additional Information

Root cause: PR #30949 (resolving #28411 and #30900) added applyFullscreenSafeArea() to handle safe-area insets dynamically for modals. The heuristic if (!hasContent || hasFooter) return; assumes that any modal with ion-content and no ion-footer needs wrapper-level safe-area compensation. However, ion-content already handles bottom safe-area internally via its scroll container, so this creates a double safe-area effect.

Affected templates: Any modal that uses ion-content without ion-footer — a very common pattern for settings modals, info modals, selection modals, etc.

Current workaround: Add an empty <ion-footer></ion-footer> after </ion-content> in the modal template. This triggers the hasFooter early-exit path, preventing the wrapper height reduction:

<ion-content>
  <!-- modal content -->
</ion-content>

<!-- Workaround: empty ion-footer prevents applyFullscreenSafeArea() regression -->
<ion-footer></ion-footer>

Suggested fix considerations:

• ion-content already applies --ion-safe-area-bottom to its scroll padding. The wrapper-level adjustment creates double compensation.
• Consider only applying the wrapper adjustment when the modal does NOT contain ion-content (raw HTML modals), or when ion-content has fullscreen="false", rather than when ion-footer is absent.
• Alternatively, check whether the modal's --height is 100% (fullscreen) before reducing it.

[ionitron-bot]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.