bug(sidenav): nested side nav, inner fixedinviewport not respected in webkit
- 主要言語
- TypeScript
- スター
- 25k
- フォーク
- 6.8k
- 平均マージ
- 1日 8時間
- マージ済み PR(30日)
- 91
説明
### 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
コントリビューションガイド
調査の方向性
リンクされている StackBlitz の再現とその src/example/sidenav-backdrop-example.css から始め、Chrome のネストされた sidenav を Safari/WebKit と比較し、その後、ドキュメント化された z-index の回避策とも比較します。fixedInViewport を指定した内側の over-mode sidenav が、 այդ回避策を必要とせずに WebKit で兄弟の toolbar コンテンツの上に描画されれば完了です。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- angular, typescript
- 領域
- frontend
- issue の種類
- バグ
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 活発さ
- 停滞
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 35/100