Keep the backdrop on the second modal

When I open 2 modals, the backdrop element of the second modal is not visible.
This is due to a core style that overwrites the css variable: ~ ion-modal.modal-default {
    --backdrop-opacity: 0;
    --box-shadow: none;

I tried to use a stronger CSS selector but the core styles stay prior

Is there a way to keep the backdrop style for all the modals?


After several tests, I arrive to overwrite the styles but not with all the same behaviors:

.modal-default ~ .modal-default::part(backdrop) {
	background-color: var(--ion-backdrop-color) !important;
	opacity: 0.5 !important;

Now, the backdrop is visible but the transition is not maintained and so, the backdrop appears very quickly without any smooth animation even if I add a custom transition property.

Also, I don’t really appreciate using the !important. So if there is another workaround, this could be very nice!


What type of modal are you using? inline or controller?

I use the controller modal for the moment.