angular / angular/components

bug(tab): position sticky is broken inside of tabs

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

position sticky doesn't work inside of mat-tabs because they use overflow: hidden;

### Reproduction

StackBlitz link: https://components-issue-kwznw3.stackblitz.io https://stackblitz.com/edit/components-issue-kwznw3?file=src%2Fapp%2Fexample-component.html
Steps to reproduce:
1. scroll down
2. see that the "broken scroll" element inside of the tab doesn't stick, but the same code outside does (see "sticky" right below it)

### Expected Behavior

position sticky should work

### Actual Behavior

position sticky doesn't work

### Environment

- Angular: tried it with 16.2.1 and 17.1.0
- CDK/Material: tried it with 16.2.1 and 17.1.0
- Browser(s): chrome/firefox
- Operating System (e.g. Windows, macOS, Ubuntu): windows

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par la reproduction StackBlitz liée et le fichier src/app/example-component.html référencé, puis examinez comment le comportement d’overflow du conteneur d’onglets affecte position: sticky. Le travail est terminé lorsque l’élément situé dans un onglet reste fixe lors du défilement, comme dans la reproduction, sans entraîner de régression du comportement normal des onglets.

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

Évaluation

Stack technique
angular, css
Domaine
frontend
Type d'issue
Bug
Difficulté
4/5
Temps estimé
3-5 jours
Activité
À l'abandon
Clarté
Clairement spécifiée
Accessibilité débutants
35/100

Recevez les nouvelles issues par e-mail

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