bug(MatTab): matieral tab header: pagination controls flickering

[alexfung888]

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

15

Description

At some particular widths, the tab header will jump between two states:

• display the tab headers with pagination control (ie < on far left and > on far right)
• display the tab headers without pagination controls

I cannot make a sample code to show this, but it has already appeared on two of my pages. When it happens, the page width is wide enough to show all the tab headers without scrolling. Yet, the <> appears (making the headers to be displayed with less spacing) and then disappears. It is happening at more times per second than my eye can catch. All I can see is a pair of blur images for each tab header, since they are placed at slightly different locations with vs without the <>. On inspection, the class mat-mdc-tab-header-pagination-controls-enabled will be applied and removed from the mat-tab-header at top speed.

This is the same as the locked issue 27084

@amysorto

Reproduction

I have no idea how to reproduce it, it happens when the material tab group has a particular range of width.

Even given a page with a material tab group, it is not always possible to resize the page to make this happen.

Refer to the photo I took

Expected Behavior

the tab headers should either be displayed with or without the scrolling controls < and >

Actual Behavior

the display is swapping between the two, making the headers unreadable.

Environment

• Angular: 16.1.4
• CDK/Material: 16.1.4
• Browser(s): Chrome Version 114.0.5735.199 (Official Build) (64-bit)
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 10 21H2

[zarend]

Hello @alexfung888 ,

I see that you have already reported that you are having trouble with the pagination controls in #27084.

Unfortunately we are not able to take action if we cannot reproduce it. This may be an issue with your application code or environment.

If you are able to file the issue, please file an issue report with a Stackblitz reproduction or some kind of reproduction steps so that the Angular team can take action on the issue.

This ticket seems like a support request to me. We are able to provide a limited amount of support in this issue tracker. I think you would get more help by asking in one of our support channels such as Stackoverflow https://stackoverflow.com/questions/tagged/angular-material2 .

Best regards,

Zach

[wagnermaciel]

Closing since there has been no response in 2 weeks after more details were requested

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}