问题
在历史记录页或风格页面上下滑动后打开设置弹窗,页面的自定义滚动条(.ol-thinscroll)会覆盖在设置弹窗之上,z-index 无法隔离。
根因分析
SettingsModal 的遮罩层使用 position: absolute; z-index: 50,但它和页面滚动条处在同一个 overflow: hidden 祖容器的 stacking context 内。WebKitGTK 下的滚动条是元素自绘的一部分,不创建独立合成层,z-index 对此无效。
已尝试
position: absolute → position: fixed:无效
- 主容器加
isolation: isolate:无效
复现步骤
- 打开历史记录页面,上下滑动
- 点击设置按钮打开设置弹窗
- 历史页面的滚动条仍然可见,盖在设置弹窗上
可能方向
- 设置打开时直接用 JS 设置滚动容器
overflow: hidden 隐藏滚动条
- 或者把
SettingsModal 渲染为 React Portal 到 document.body,完全脱离当前 DOM 树
问题
在历史记录页或风格页面上下滑动后打开设置弹窗,页面的自定义滚动条(
.ol-thinscroll)会覆盖在设置弹窗之上,z-index 无法隔离。根因分析
SettingsModal的遮罩层使用position: absolute; z-index: 50,但它和页面滚动条处在同一个overflow: hidden祖容器的 stacking context 内。WebKitGTK 下的滚动条是元素自绘的一部分,不创建独立合成层,z-index对此无效。已尝试
position: absolute→position: fixed:无效isolation: isolate:无效复现步骤
可能方向
overflow: hidden隐藏滚动条SettingsModal渲染为 React Portal 到document.body,完全脱离当前 DOM 树