angular / angular/components

bug(MatTabs): Touch Delayed on Mobile

Abierto
#31,488 2 comentarios 0 reacciones 0 asignados Ver en GitHub
area: material/tabs P3
Lenguaje dominante
TypeScript
Estrellas
25k
Forks
6.8k
Merge medio
1 d 8 h
PR fusionados (30 d)
91

Descripción

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

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Comienza con el componente MatTabs en la página de descripción general de la documentación de Material y reproduce la interacción táctil en la emulación móvil de Chrome y en Safari en iPad OS. Compara la latencia del cambio mediante interacción táctil y mediante el ratón, y después identifica el punto de entrada de MatTabs responsable del retraso. Se considera completado cuando el cambio mediante interacción táctil comienza con la misma capacidad de respuesta que el cambio mediante el ratón y el comportamiento está cubierto por una prueba reproducible.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
angular, typescript
Área
frontend
Tipo de issue
Error
Dificultad
3/5
Tiempo estimado
1-2 días
Estado de actividad
Estancado
Claridad
Necesita aclaración
Aptitud para principiantes
35/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.