ion-loading cant be manually dismissed using the backdrop on iOS

Question

Im using Ionic v7 together with Angular and im not able to use the backdropDismiss property provided by the LoadingController. I have tested the behavior on the browser, Android and iOS and the misbehavior is only present on iOS. The LoadingController is injected into a service and consumed from within the service. Here is a minimal code:

import { inject, Injectable } from '@angular/core';
import { LoadingController } from '@ionic/angular';

@Injectable()
export class MyTestService {
  private readonly loadingController = inject(LoadingController);

  showLoading(): void {
    const loadingController = this.loadingController.create({
      message: 'loading',
      spinner: 'dots',
      showBackdrop: true,
      backdropDismiss: true,
    }).then((element) => void element.present());
  }
}

How can I achieve the default ionic backdrop behavior similar to how it is present in android and the web? I have tried already setting a custom css class for ion-loading as it was presented as a solution for lower versions of ionic, however it did not help.

components.scss:

ion-loading.backdrop-workaround {
  --height: auto;
}

Then adding the custom class to my loading instance:

const loadingController = this.loadingController.create({
      message: 'loading',
      spinner: 'dots',
      showBackdrop: true,
      backdropDismiss: true,
      cssClass: 'backdrop-workaround',  // did not help for iOS
    });

Answer 1

The issue was related to the LoadingController. When I switched to the inline method, the backdrop worked.

Sample could taken from the docs:

<ion-button id="open-loading">Show Loading</ion-button>
<ion-loading trigger="open-loading" message="loading"></ion-loading>