angular / angular/components

bug(sidenav): nested side nav, inner fixedinviewport not respected in webkit

Abierto
#30,552 0 comentarios 0 reacciones 0 asignados Ver en GitHub
area: material/sidenav P4
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

**Situation:**
When you have nested sidenavs and the inner sidenav mode is over and fixedInViewport is true that is not being respected properly in webkit browsers.

**Workaround:**
As a workaround, we found that setting the z-index of the outer container and content to auto fixes the issue.

### Reproduction

StackBlitz link: [link](https://stackblitz.com/edit/components-issue-starter-k2dsck2f?file=src%2Fexample%2Fsidenav-backdrop-example.css)

Steps to reproduce:
1. open stackblitz in chrome to see expected behavior
2. toggle the inner drawer and see that the content is rendered **over** the toolbar(sibling content)
3. open stackblitz in safari or webkit
4. toggle the inner drawer and see that the content is rendered **under** the toolbar(sibling content)
5. uncomment the css to see the workaround

### Expected Behavior

It should work in webkit as it does in chrome. Fixedinviewport and over mode should not only render on top of parent content but also any content that is sibling of the parent.

### Actual Behavior

On webkit, the inner sidenav is rendered underneath any sibling content of the outer sidenav.

### Environment

- Angular:19.0.3
- CDK/Material:19.0.3
- Browser(s): Safari, Webkit
- Operating System (e.g. Windows, macOS, Ubuntu): MacOS

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Comienza con la reproducción enlazada de StackBlitz y su src/example/sidenav-backdrop-example.css, comparando la sidenav anidada en Chrome con Safari/WebKit y después con la solución alternativa documentada de z-index. Se considera terminado cuando la sidenav interna en modo over con fixedInViewport se renderiza por encima del contenido de la toolbar hermana en WebKit sin requerir esa solución alternativa.

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
35/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.