ionic-team / ionic-team/ionic-framework

bug: ion-modal card modal is only dismissable from the handle until overscroll settles to top

Aperta
#30,502 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub
triage
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/docs/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 a card modal, you have to be scrolled to exactly the top (no higher) to be able to drag down on the content to dismiss. If the content has overscrolled/bounced "above" the top you have to wait for it to settle back to 0 before you can dismiss by dragging the content.

I've attached a video - notice at the top it really wants to keep scrolling into the overscroll area, when you'd expect it to be dismissing the modal.

https://github.com/user-attachments/assets/2da594d8-b315-466b-8038-776f5588bff8

### Expected Behavior

The default iOS behaviour seems to be that if you're in the overscroll area you can drag down to dismiss, and the content and top of the sheet will try to snap back together as you do. Here's a video of how it works after I went into `@ionic/core/components/modal.js` inside node_modules and wherever I saw `scrollTop === 0` I replaced it with `scrollTop <= 0`. Now when it's overscrolled at the top it allows drag to dismiss, and to me it makes it a bunch easier to dismiss the modal (as well as being consistent with native behaviour).

https://github.com/user-attachments/assets/813b1908-40f0-4272-abd9-5d54da60d524

### Steps to Reproduce

Open the attached StackBlitz on an iOS device (hopefully it runs on an iPhone, I didn't have much luck so I built a local copy).
Open the modal and try scrolling before it's settled at exactly the top (vaguely but not 100% aligned with when the thin scrollbar is shown).

### Code Reproduction URL

https://stackblitz.com/edit/2xkdprpz

### Ionic Info

Probably mostly irrelevant:

[WARN] You are not in an Ionic project directory. Project context may be missing.

Ionic:

Ionic CLI : 5.4.16

Utility:

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

System:

NodeJS : v20.19.2
npm : 10.8.2
OS : Linux 6.6

### Additional Information

There's some related work [here](https://github.com/ionic-team/ionic-framework/pull/29260/files) and [here](https://github.com/ionic-team/ionic-framework/issues/24583). Also there were 3 spots where I changed `scrollTop === 0` to `scrollTop <= 0` but I haven't dug far enough to know whether they're all needed or whether there's any side effects.

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Reproduce the issue using the linked StackBlitz on iOS, then inspect @ionic/core/components/modal.js and the related work in PR #29260 and issue #24583. Compare the three scrollTop checks mentioned in the report and verify that card-modal content can begin dismissal while overscrolled, without introducing side effects.

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

Valutazione

Stack tecnologico
typescript
Ambito
frontend, mobile
Tipo di issue
Bug
Difficoltà
3/5
Tempo stimato
1-2 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
45/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.