Ionic 4 Modal not appearing with transparent background

**Ionic version:**

[x] **4.x**

**I'm submitting a ...**

[ ] bug report
[ ] feature request

**Current behavior:**

My Modal is appearing with a solid background/Overlay

**Expected behavior:**

I want my modal to appear with a transparent background/overlay
**Steps to reproduce:**

**Related code:**

```
insert short code snippets here
modal.scss :
.main_view{
background: transparent;
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: .5;
background-color: #333;

}

modal.html:

and .ts to invoke modal in my app:

async confirm(){

const modal = await this.modalCtrl.create({
component: ModalPage,
// componentProps: {value : "test"},
});
await modal.present();
modal.onDidDismiss().then(res => {
console.log(JSON.stringify(res))
this.isModalDismiss = res.data.isDismiss;
console.log(this.isModalDismiss)
this.routeDriver();
});
}

```

**Other information:**

**Ionic info:**

```
insert the output from ionic info here
```

Start with the linked StackBlitz example and its pages/modal/modal.scss, then compare it with the provided modal.scss, modal.html, and confirm() code. Reproduce the modal in the affected app and identify why its background or overlay differs from the expected transparent appearance; done means the modal renders with the intended transparent background and overlay.

Written by the indexing model from the issue text.