bug: card modal doesn't add border radius until the modal is fully opened on iOS

[zacksmash]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

When using the "Card' modal style, the "body" behind the modal window doesn't get the radius edges applied until after the modal window has fully opened. This only happens if opening the modal from an IonList > IonItem with the button attribute.

Expected Behavior

The Card modal should have the radius edges, like normal

Steps to Reproduce

1. Create an IonList element, with an IonItem that has the button attribute. Then use that IonItem to open an IonModal, with a presentingElement for the Card effect.

<template>
  <ion-page ref="presentingElement">
    <ion-header :translucent="true">
      <ion-toolbar>
        <ion-title>Blank</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content :fullscreen="true">
      <ion-header collapse="condense">
        <ion-toolbar>
          <ion-title size="large">Blank</ion-title>
        </ion-toolbar>
      </ion-header>

      <ion-list>
        <ion-item button @click="isOpen = true">
          <ion-label>List Item Label</ion-label>
        </ion-item>

        <ion-modal ref="modal" :is-open="isOpen" :presenting-element="$refs?.presentingElement?.$el">
          <ion-header>
            <ion-toolbar>
              <ion-title>Modal</ion-title>
              <ion-buttons slot="end">
                <ion-button @click="isOpen = false">Close</ion-button>
              </ion-buttons>
            </ion-toolbar>
          </ion-header>
          <ion-content class="ion-padding">
            Some Modal Content
          </ion-content>
        </ion-modal>
      </ion-list>
    </ion-content>
  </ion-page>
</template>

<script setup>
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonList, IonItem, IonLabel, IonButtons, IonButton, IonModal } from '@ionic/vue';
import { ref } from 'vue';

const isOpen = ref(false);
</script>

Code Reproduction URL

Stackblitz URL

Ionic Info

Ionic:

Ionic CLI : 7.2.0 (/Users/Zack/.nvm/versions/node/v20.11.1/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/vue 7.7.4

Capacitor:

Capacitor CLI : 5.7.2 @capacitor/android : not installed @capacitor/core : 5.7.2 @capacitor/ios : 5.7.2

Utility:

cordova-res : not installed globally native-run : 2.0.1

System:

NodeJS : v20.11.1 (/Users/Zack/.nvm/versions/node/v20.11.1/bin/node) npm : 10.4.0 OS : macOS Sonoma 14.3.1

Additional Information

Duplicate of #28469, with better reproduction instructions.

[ionitron-bot[bot]]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[zacksmash]

@brandyscarney Added Stackblitz URL to main entry.

This will need to be reproduced using Safari or in the Simulator.