I’ve been working with Ionic’s modal component in a angular project and have witnessed some unexpected behavior regarding the breakpoints. According to the official documentation, modal breakpoints are supposed to be relative to the viewport height. But for some reason, in my project, it seems that the breakpoints are being applied relative to the content height inside the modal and not the viewport height.

Here is what I’m experiencing:

• When I set breakpoints: [0.5, 0.75, 1] and initialBreakpoint: 0.5, the modal height is half the height of the modal’s content, not the viewport.
• For example, if the content height is 373.5px, the modal height at a 0.5 breakpoint is around 186.75px, which is half of the content height.

Here is the relevant code setup:

TestPage Component Ts:

import { Component} from '@angular/core';
import { ModalController } from '@ionic/angular';

@Component({
  selector: 'app-test-page',
  templateUrl: './test-page.component.html',
  styleUrls: ['./test-page.component.css']
})
export class TestPageComponent {

  constructor(
    private modalController: ModalController
  ) {}
}

TestPage Component Html:

<div class="container">
    <h1>TESTING</h1>
    <h1>TESTING</h1>
    <h1>TESTING</h1>
    <h1>TESTING</h1>
</div>

TestPage Component Css:

  .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 15px;
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    background-color: #FEFEFA;
  }

I use a service to encapsulate the modal logic:

BottomsheetHelper Service:

@Injectable({
  providedIn: 'root'
})
export class BottomsheetHelperService {

  constructor(
    private modalController: ModalController
  ) { }

  async openTestPage(): Promise<void> {
    const modal = await this.modalController.create({
      component: TestPageComponent,
      handle: true,
      breakpoints: [0.5, 0.75, 1],
      initialBreakpoint: 0.5,
    });
    await modal.present();
  }
}

And in the parent component i call:

this.bottomSheetHelperService.openTestPage();

Screenshots of the modal and computed style from the console:

Questions:

• Has anyone else encountered this behavior where the breakpoints are based on the content height instead of the viewport height?
• Is this an expected behavior under certain conditions, or could it be due to some custom CSS or a specific version of Ionic?

I’m currently using Ionic version 8.2.6
I haven’t defined any global css style that would somehow override default behavior.

For my usecase, this is actually wanted behavior.
I want the modal/bottomsheet to set it self based on the content height. But i’m just curious to know if I can expect this to not work on a later time.

Thanks in advance for any insights!