angular / angular/components

bug(MatTabs): Touch Delayed on Mobile

Open
#31,488 2 comments 0 reactions 0 assignees View on GitHub
area: material/tabs P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
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

Contributor guide

Open the contributing guide

Research direction

Start with the MatTabs component on the Material documentation overview page and reproduce the touch interaction in Chrome mobile emulation and Safari on iPad OS. Compare touch and mouse switching latency, then identify the MatTabs entry point responsible for the delay. Done means touch switching starts with the same responsiveness as mouse switching and the behavior is covered by a reproducible test.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.