angular / angular/components

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

Open
#30,552 0 comments 0 reactions 0 assignees View on GitHub
area: material/sidenav P4
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
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

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

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproduction and its src/example/sidenav-backdrop-example.css, comparing the nested sidenav in Chrome with Safari/WebKit and then with the documented z-index workaround. Done means the inner over-mode sidenav with fixedInViewport renders above sibling toolbar content in WebKit without requiring that workaround.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.