bug(mat-tab-group): inner div cannot cover 100% of viewport, on iphone
- Lenguaje dominante
- TypeScript
- Estrellas
- 25k
- Forks
- 6.8k
- Merge medio
- 1 d 8 h
- PR fusionados (30 d)
- 91
Descripción
#### Reproduction
Use StackBlitz to reproduce your issue: https://stackblitz.com/fork/components-issue
StackBlitz to reproduce:
https://stackblitz.com/edit/components-issue-dssxxk
or
https://stackblitz.com/edit/angular-3qr9lv
Attention - this will reproduce only on iOS (e.g. iPhone) with both Chrome and Safari.
On Android it works perfectly.
On computer with Chrome and F12 on - it works perfectly.
Steps to reproduce:
1. Create mat-tab-group with few mat-tab children.
2. Inside one of the children, set a div with 100% height, 100% width, fixed position, with top, right equal to zero and a high z-index. Also, set it with a background-color (e.g. blue) to easily reproduce the behavior.
#### Expected Behavior
What behavior were you expecting to see?
The created div should cover ALL viewport (top to bottom, right to left), including the mat-tab, mat-tab-group and any other components on the HTML page (e.g. navbar etc.)
In other words - all screen will be blue.
#### Actual Behavior
What behavior did you actually see?
The created div covers the entire page, but you cannot see it, although it has a blue background, the blue color appears only within the mat-tab. above the mat-tab it doesn't show the blue background, yet it covers the elements (e.g. if you have a button above the mat-tab-group, you cannot click it)
#### Environment
- Angular: 8
- CDK/Material: 8
- Browser(s): chrome, safari
- Operating System (e.g. Windows, macOS, Ubuntu): iOS
Guía de contribución
Línea de trabajo
Comienza con las reproducciones de StackBlitz enlazadas y ejecútalas en iOS tanto en Chrome como en Safari; después, compara el comportamiento de mat-tab-group con Android o escritorio. Rastrea el diseño y el posicionamiento de mat-tab-group relacionados con el div interno que cubre el viewport. Se considera terminado cuando el div cubra visiblemente todo el viewport, incluido el contenido fuera del grupo de pestañas, sin cambiar el comportamiento indicado en otras plataformas.
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
- 4/5
- Tiempo estimado
- 3-5 días
- Estado de actividad
- Estancado
- Claridad
- Bastante claro
- Aptitud para principiantes
- 38/100