IONIC 4: ion-backdrop not working

Ionic Framework
1 
<ion-backdrop visible="false" tappable="false"></ion-backdrop>

i added the code above and the backdrop is not visible but i cannot click anything behind it, and the mouse becomes pointer.

1 Like
2

In app.scss try this one.

# app.scss

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

actually the problem is even if visible is false, i cannot click anything in the background. is that the intended result?

1 Like
4

did you find a slution?

5

I have the same problem :frowning:

6

Having the same problem were you able to find a solution?

7

I believe it’s a severe bug or improper documentation.

See: https://github.com/ionic-team/ionic-framework/issues?q=ion-backdrop

8

ion-backdrop is used to deny clicks behind it, that’s the purpose of the component (change z-indexes if you want another component in front of it).
If you’d like to make it visible indeed there is a mistake from ionic who sets by default the opacitiy to 0.01 so you don’t see it, event when visible attribute is true.
If you wan’t to fix it, just set the opacity of the backdrop to whatever you want (0.5 for example).