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

### Prerequisites

- [X] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#creating-an-issue).
- [X] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [X] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/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.

``` html

Blank

Blank

List Item Label

Modal

Close




Some Modal Content

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

const isOpen = ref(false);

```

### Code Reproduction URL

[Stackblitz URL](https://stackblitz.com/edit/vfy47c?file=src%2FApp.vue)

### 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.