Ion-modal changes background color of ion-page

Ionic Framework Ionic Vue
1

When the modal is opened, the background color of the page changes. How can this be prevented?
Thanks a million!

ezgif-4-a606e4afdf

 <ion-modal ref="modal" trigger="open-modal" :show-backdrop="false" :presenting-element="presentingElement" style="--max-height: 30vh; --backdrop-opacity: 0;">
2

I see that you are setting the style, and that should work. But this class solution works for me:

<template>
<ion-modal class="clear-backdrop">...</ion-modal>

<style scoped>
ion-modal.clear-backdrop {
  --backdrop-opacity: 0;
}
3

Thank you for your answer. Unfortunately, the background color of ion-page or ion-content is still changed.

4

Its probably not working because your are using scoped css styles?

5

Current code without scoped styles:

<template>
    <ion-page ref="indexpage">
        <ion-content :fullscreen="true">
            <ion-modal ref="modal" class="clear-backdrop" :show-backdrop="false" trigger="open-modal" :presenting-element="presentingElement"></ion-modal>
        </ion-content>
    </ion-page>
</template>

<style>
ion-modal,
.ion-modal,
.clear-backdrop {
    --backdrop-opacity: 0;
}
</style>

It doesn’t look to me like the backdrop is causing the background color of the page to become lighter.