Ionic-framework: Modal backdrop always hidden and z-index bug

[EmmanuelFRANCOIS]

Ionic version: (check one with "x")
[ ] 1.x
[x ] 2.x

I'm submitting a ... (check one with "x")
[x ] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
When presenting a component through modalcontroller, the backdrop is always hidden whatever showBackdrop is set to true or false.

Expected behavior:
When showBackdrop is set to true (default value), backdrop should be visible and behind the modal component.

Steps to reproduce:
(followed Ionic 2 API documentation ModalController example)

import { ModalController, ViewController } from 'ionic-angular';
import { CmpModal } from '../../components/cmpModal/cmpModal';
...
presentCmpModal() {
let opts: any = {
  showBackdrop: true,
  enableBackdropDismiss: true
}
let cmpModal = this.modalCtrl.create( CmpModal, null, opts );
cmpModal.onDidDismiss(data => { console.log(data); });
cmpModal.present();
}

The problem seems to come from css:

@media not all and (min-height: 600px) and (min-width: 768px)
ion-modal ion-backdrop {
    visibility: hidden;
}

When deactivating "visibility: hidden" line in chrome, backdrop becomes visible.
However, the CmpModal component is placed BEHIND backdrop, so it is not reachable for action...

Other information:
Cordova CLI: 6.1.1
Ionic Framework Version: 2.0.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.0.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 7
Node Version: v6.9.0
Xcode version: Not installed

[jgw96]

Hello, thanks for using Ionic! We will take a look into this.

[EmmanuelFRANCOIS]

Any news about that?
I can not close my component project only because of this backdrop problem...
Any chance to get a solution quickly?

[alkrauss48]

I am having these issues too:

1. ion-backdrop has style of visiblity: hidden by default
2. When I manually remove that style, the backdrop covers the whole modal-wrapper (meaning anywhere you click, the modal dismisess) - unless you switch set z-index: 0 on the ion-backdrop, in which case it visually renders as expected, but the click-to-dismiss action fails to work (since it's then covered by the .modal-wrapper div).

A possible workaround right now is to just apply a selector to the modal and give that selector a translucent background (to simulate the backdrop), and place an X icon to manually dismiss the modal in the upper corner. The only detriment is that you see the backdrop "sliding" up since it's a part of the modal, and you can't click on the backdrop to dismiss it.

You could apply a (click) event to the custom backdrop that dismisses the view controller, but that will trigger even if you click on the contents inside the modal - which is undesired. But, if you really want that behavior, then you could still get the desired action by tracking the target of the $event variable on the click event, and if the backdrop is targeted, then close the modal; otherwise (meaning something inside the modal was clicked), don't.

[EmmanuelFRANCOIS]

I've already tried this, and it's working well except the backdrop animation (bottom to top) when modal enters...
However, it is not a clean solution, and I would prefer to use modalcontroller as it should be used regarding the docs.
Additionnally, after testing my modal component on phones and tablets, it seems the modalcontroller is not consistent depending on the device it runs on:

• on phones, backdrop is always hidden and covers my modal component
• on tablets, backdrop is always shown and behind my modal component

I would also like to fix my modal component position to bottom docked.

• On phones, it's quite easy through css, as the modal component takes the full width of the screen.
• But on tablets, I need to fix the max-width of the component to 400px, and center it horizontally. However, Ionic css fix the modal-wrapper width and height to 600px. It should adjust automatically its dimensions to its content with maximum width and height values to respect screen limits.

[EmmanuelFRANCOIS]

@jgw96
Do you have any news about this issue?
My plugin is finished, but I'm stucked with these modal bugs...
Can you do anything about it?
Thanks in advance, and congratulations for all amazing work on Ionic 2 to all the team!

[EmmanuelFRANCOIS]

Any news about this?

[Michal-Mikolas]

Hotfix that works for me:

# app.scss

ion-modal {
    ion-backdrop {
        visibility: visible;
    }
    .modal-wrapper {
        width: 86%;
        height: 86%;
        margin: 7%;
        position: absolute;
        border-radius: 13px;
        overflow: hidden;
    }
}

[missakation]

@Michal-Mikolas

Hi, I tried your solution and still it is now showing or maybe I am doing wrong. In which file I should exactly put those styles ?

[NickStafford]

Fair play to Michal that solution works a treat. Any news on an official fix for this at some point?

[alexshak]

Not having luck using that hotfix and still retaining the ability to tap the backdrop to dismiss. Is the proper fix just to generate the inside the .modal-wrapper so it's still clickable while having a z-index less than the modal content?

[matthew-valenti]

To get this to work for me, I needed the following styles on ion-backdrop:

ion-modal {

    ion-backdrop {
        visibility: visible;
        opacity: 0.75;
        z-index: 0;
    }
}

[brunosaales]

@Michal-Mikolas you rock dude!!
You just saved my life, bro!
Thanks, thanks and thanks!

[ionitron-bot[bot]]

This issue has been automatically identified as an Ionic 3 issue. We recently moved Ionic 3 to its own repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

If I've made a mistake, and if this issue is still relevant to Ionic 4, please let the Ionic Framework team know!

Thank you for using Ionic!

[ionitron-bot[bot]]

Issue moved to: https://github.com/ionic-team/ionic-v3/issues/173