angular / angular/components

bug(Drag and Drop): autoscroll fails in full size web view

Ouverte
#27,169 5 commentaires 0 réactions 0 personnes assignées Voir sur GitHub
area: cdk/scrolling P4
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
91

Description

### Is this a regression?

- [ ] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

_No response_

### Description

When a hybrid mobile app (Ionic Capacitor) is made with a long list of draggable items, the autoscroll fails to engage. Take the same codebase and run it on a mobile browser, it fails. Run it on a desktop browser and it works.
Notice on a desktop browser that autoscrolling only begins when the cursor is outside the html page. It is not possible to get outside the page on a full screen mobile web view since touching outside that area is touching off the screen.

### Reproduction

Steps to reproduce:
1. Build a simple Ionic Capacitor mobile app with a list
2. Add CDK Drag and Drop elements to the list
3. Run it on a phone or phone browser.
4. Drag an item form the top to near the bottom.

### Expected Behavior

List should autoscroll up when touching near edge of phone.

### Actual Behavior

List fails to autoscroll.

### Environment

- Angular: 15.2.8
- CDK/Material: 15.2.9
- Browser(s): Safari, Safari Mobile
- Operating System (e.g. Windows, macOS, Ubuntu): macOS 12.6.6
- Ionic: 5.4.16
- Capacitor 5.0.3

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Reproduire le comportement de Angular CDK Drag and Drop dans la configuration Ionic Capacitor décrite et sur Safari Mobile, en le comparant au comportement dans les navigateurs de bureau. Étudier le comportement d’autoscroll pendant un glissement à proximité du bord du viewport du téléphone ; le travail est considéré comme terminé lorsqu’une longue liste effectue un autoscroll lorsque l’élément déplacé atteint ce bord.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, typescript
Domaine
frontend, mobile-dev
Type d'issue
Bug
Difficulté
4/5
Temps estimé
3-5 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
35/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.