bug(MatTabs): Touch Delayed on Mobile
- Lingua principale
- TypeScript
- Stelle
- 25k
- Fork
- 6.8k
- Merge medio
- 1g 8h
- PR unite (30g)
- 91
Descrizione
### 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
Guida per i contributori
Apri la guida per i contributori
Direzione di ricerca
Inizia con il componente MatTabs nella pagina panoramica della documentazione di Material e riproduci l’interazione touch nell’emulazione mobile di Chrome e in Safari su iPad OS. Confronta la latenza del cambio tramite touch e tramite mouse, quindi identifica l’entry point di MatTabs responsabile del ritardo. Il lavoro è completato quando il cambio tramite touch inizia con la stessa reattività del cambio tramite mouse e il comportamento è coperto da un test riproducibile.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- angular, typescript
- Ambito
- frontend
- Tipo di issue
- Bug
- Difficoltà
- 3/5
- Tempo stimato
- 1-2 giorni
- Stato di attività
- Ferma
- Chiarezza
- Da chiarire
- Idoneità per principianti
- 35/100