angular / angular/components

bug(MatTabs): Touch Delayed on Mobile

Offen
#31,488 2 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: material/tabs P3
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

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

With MatTab tab switching, there exists a delay on mobile devices and in the Chrome mobile emulation dev mode. This is 100% reproducible on the standard documentation page: https://material.angular.dev/components/tabs/overview

Users found that our WebApp has a sluggish delay when switching between MatTabs and I thought there was some issue with the way we load our components, but no: It turns out there is an underlying issue with how Mat Tabs are. Demonstrated in this video, there is a delay.

https://github.com/user-attachments/assets/3376d4c4-9f3d-4a1d-ba89-c480e5266231

On chrome, until the tab starts to animate, it takes **~100ms** from the moment of click. But in Mobile Device Emulation mode, you can see that it takes 3 times as long, roughly **~330ms**. This is a bit worse on real iPad hardware, where it take up to **~400ms**, feeling seriously sluggish.

I think this to be a regression, related to https://stackoverflow.com/questions/39902055/web-app-feels-less-responsive-when-added-to-iphones-home-screen

### Reproduction

StackBlitz link:
Steps to reproduce:
1.
2.

### Expected Behavior

The delay when interacting with Mat Tabs should be the same when using touch, as when using the mouse.

### Actual Behavior

There seems to be a 300ms delay, specifically with MatTabs

### Environment

- Angular: 19
- CDK/Material: 19
- Browser(s): Chrome, Safari
- Operating System (e.g. Windows, macOS, Ubuntu): Windows, iPad OS

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne mit der MatTabs-Komponente auf der Übersichtsseite der Material-Dokumentation und reproduziere die Touch-Interaktion in der mobilen Emulation von Chrome und in Safari auf iPad OS. Vergleiche die Latenz beim Wechseln per Touch und Maus und ermittle anschließend den MatTabs-Einstiegspunkt, der für die Verzögerung verantwortlich ist. Die Aufgabe ist abgeschlossen, wenn der Wechsel per Touch mit derselben Reaktionsfähigkeit wie der Wechsel per Maus beginnt und das Verhalten durch einen reproduzierbaren Test abgedeckt ist.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
frontend
Issue-Typ
Bug
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Veraltet
Klarheit
Muss geklärt werden
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.