angular / angular/components

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

Aperta
#30,552 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub
area: material/sidenav P4
Lingua principale
TypeScript
Stelle
25k
Fork
6.8k
Merge medio
1g 8h
PR unite (30g)
91

Descrizione

### 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

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia con la riproduzione StackBlitz collegata e il relativo src/example/sidenav-backdrop-example.css, confrontando la sidenav annidata in Chrome con Safari/WebKit e poi con il workaround z-index documentato. Il lavoro è completato quando la sidenav interna in modalità over con fixedInViewport viene renderizzata sopra il contenuto della toolbar consorella in WebKit senza richiedere quel workaround.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
angular, typescript
Ambito
frontend
Tipo di issue
Bug
Difficoltà
4/5
Tempo stimato
3-5 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
35/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.