遮罩层bug，翻倒下页，遮罩层失效 ，左侧边栏拉出，就会透明显示在顶层，和底层混在一起

[18494999]

Reproduction link

https://preview.pro.ant.design/

Steps to reproduce

手机模式，点击侧边栏，滑动页面下页

What is expected?

侧边栏显示正常

What is actually happening?

遮罩层bug，翻倒下页，遮罩层失效 ，左侧边栏拉出，就会透明显示在顶层，和底层混在一起

Environment	Info
antd	undefined
React	React
System	windows10
Browser	chrome

[coderabbitai]

📝 CodeRabbit Plan Mode

Generate an implementation plan and prompts that you can use with your favorite coding agent.

• Create Plan

Examples

• Example 1
• Example 2

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord or schedule a call!

[coderabbitai]

📝 CodeRabbit Plan Mode

Generate an implementation plan and prompts that you can use with your favorite coding agent.

• Create Plan

Examples

• Example 1
• Example 2

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord or schedule a call!

[dosubot]

Hi @18494999! I'm Dosu and I’m helping the ant-design-pro team.

这个遮罩层 bug 很可能是由于 Drawer 遮罩层和侧边栏（SiderMenu）之间的 z-index 或 stacking context 冲突导致的，尤其是在移动端滚动时。Ant Design Pro 的移动端侧边栏是通过 Ant Design 的 Drawer 组件实现的，遮罩层和侧边栏的层级分别由 Drawer 和 SiderMenu 的 z-index 控制（通常 SiderMenu 菜单项 z-index 为 10，固定侧边栏为 100），而 Drawer 遮罩层的 z-index 默认更高，理论上应该能盖住内容，但实际项目中如果有全局样式或其它组件影响 stacking context，就会出现遮罩层透明、侧边栏和底层内容混在一起的问题。

建议排查和处理方式：

1. 检查是否有全局 CSS 或第三方样式影响了 z-index 或 position，尤其是 body、#root、Layout、Drawer、SiderMenu 等相关节点。

2. 可以尝试通过自定义 CSS 提高 Drawer 遮罩层的 z-index，例如：

   .ant-drawer-mask {
     z-index: 1100 !important;
   }

3. 如果你用的是较老版本的 @ant-design/pro-components，建议升级到 2.0 及以上版本，有用户反馈升级后遮罩相关问题得到解决（见相关讨论）。

4. 如果问题依然存在，建议用最小化 demo 逐步排查，确认没有其它全局样式或第三方库影响 Drawer 遮罩层的 stacking context。

参考实现和源码分析见 ProLayout 和 SiderMenu/Drawer 相关代码。核心就是 Drawer 遮罩层和侧边栏的 z-index 层级管理。

如需进一步排查，可以用浏览器开发者工具查看遮罩层和侧边栏的实际 z-index 及 stacking context，定位具体冲突点。

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[afc163]

是不是 #11523 这个问题？

[qianxunclub]

请问解决了吗？