bug: modal doesn't dismiss when backdrop is clicked on IOS

[chris-cornwall]

Bug Report

Ionic version:

[x] 5.x

Current behavior:

On IOS, ion-modal does not dismiss when backdrop is clicked even though backdropDismiss is set to true.

Expected behavior:

ion-modal should dismiss when backdropDismiss is set to true.

Steps to reproduce:

Open a modal which has backdropDismiss set to true and click the backdrop.

Related code:

Template

    const modal = await this.modalController.create({
      component: ItemModalPage,
      cssClass: 'item-modal',
      backdropDismiss: true,
      showBackdrop: true,
      animated: true,
      componentProps: {
        item: item,
      },
    });

CSS

.item-modal .modal-wrapper {
  top: 40%;
  bottom: 0;
  left: 0;
  right: 0;
  position: fixed;
  display: block;
  border-radius: 2px;
  min-width: 100%;

}

Other information:

As mentioned above, this only seems to happen on IOS

Ionic info:

Ionic:

   Ionic CLI                     : 5.4.13 (/Users/chris/.nvm/versions/node/v12.9.0/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 5.1.0
   @angular-devkit/build-angular : 0.1000.0-next.3
   @angular-devkit/schematics    : 10.0.0-next.3
   @angular/cli                  : 9.1.4
   @ionic/angular-toolkit        : 2.0.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.1.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 7 other plugins)

Utility:

   cordova-res : not installed
   native-run  : 1.0.0

System:

   Android SDK Tools : 26.1.1 (/Users/chris/Library/Android/sdk/)
   NodeJS            : v12.9.0 (/Users/chris/.nvm/versions/node/v12.9.0/bin/node)
   npm               : 6.14.4
   OS                : macOS Catalina

[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 provide a reproduction with the minimum amount of code required to reproduce the issue. Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

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

[chris-cornwall]

Reproduction

[liamdebeasi]

Thanks for the issue. I am going to close this as this is not a bug in Ionic Framework.

I noticed you are applying custom styles to the modal wrapper. There is a .modal-shadow div that you need to move as well in addition to doing top: 40% on .modal-wrapper. Moving the modal shadow fixes the issue.

[chris-cornwall]

Sorry for that and thanks very much for the solution!

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.