angular / angular/components

bug(MatTabs): Touch Delayed on Mobile

Ouverte
#31,488 2 commentaires 0 réactions 0 personnes assignées Voir sur GitHub
area: material/tabs P3
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

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

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par le composant MatTabs sur la page de présentation de la documentation Material et reproduisez l’interaction tactile dans l’émulation mobile de Chrome et dans Safari sur iPad OS. Comparez la latence du changement par interaction tactile et par souris, puis identifiez le point d’entrée de MatTabs responsable du délai. Le travail est terminé lorsque le changement par interaction tactile commence avec la même réactivité que le changement par souris et que le comportement est couvert par un test reproductible.

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

Évaluation

Stack technique
angular, typescript
Domaine
frontend
Type d'issue
Bug
Difficulté
3/5
Temps estimé
1-2 jours
Activité
À l'abandon
Clarté
À clarifier
Accessibilité débutants
35/100

Recevez les nouvelles issues par e-mail

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