ionic-team / ionic-team/ionic-framework

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

Aperta
#29,129 3 commenti 2 reazioni 0 assegnatari Vedi su GitHub
needs: investigation
Lingua principale
TypeScript
Stelle
52.7k
Fork
13.3k
Merge medio
1g 15h
PR unite (30g)
51

Descrizione

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

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Start with the linked StackBlitz reproduction and the Ionic Vue components involved: IonList, IonItem, and IonModal with a presentingElement. Reproduce the card modal transition on iOS, then verify that the presenting page’s border radius is applied before the modal finishes opening; note that this issue identifies #28469 as the duplicate.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
ios, typescript
Ambito
frontend, mobile-dev
Tipo di issue
Bug
Difficoltà
3/5
Tempo stimato
1-2 giorni
Stato di attività
Ferma
Chiarezza
Specificata chiaramente
Idoneità per principianti
25/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.