Skip to content

设置弹窗被页面滚动条覆盖 #580

@aeoform

Description

@aeoform

问题

在历史记录页或风格页面上下滑动后打开设置弹窗,页面的自定义滚动条(.ol-thinscroll)会覆盖在设置弹窗之上,z-index 无法隔离。

根因分析

SettingsModal 的遮罩层使用 position: absolute; z-index: 50,但它和页面滚动条处在同一个 overflow: hidden 祖容器的 stacking context 内。WebKitGTK 下的滚动条是元素自绘的一部分,不创建独立合成层,z-index 对此无效。

已尝试

  • position: absoluteposition: fixed:无效
  • 主容器加 isolation: isolate:无效

复现步骤

  1. 打开历史记录页面,上下滑动
  2. 点击设置按钮打开设置弹窗
  3. 历史页面的滚动条仍然可见,盖在设置弹窗上

可能方向

  • 设置打开时直接用 JS 设置滚动容器 overflow: hidden 隐藏滚动条
  • 或者把 SettingsModal 渲染为 React Portal 到 document.body,完全脱离当前 DOM 树

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions