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

[aeoform]

问题

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

根因分析

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

已尝试

• position: absolute → position: fixed：无效
• 主容器加 isolation: isolate：无效

复现步骤

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

可能方向

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

[aeoform]

这是AI的分析，我们没能修复问题

[appergb]

请问您使用的系统是什么呢？具体的表现形式可以让我看一下吗？其次，我们在这边目前是没有遇到这样的情况，因为 macOS 或者新版本的客户端当中打开这个设置的时候，它都会直接隐藏这个滚动条，按理来说不应该会发生这种问题。

[aeoform]

debian kde wayland

[aeoform]

这个现象只在滚动时出现，应该是上层有某个组件覆盖在了最顶层。

[appergb]

@claude 审核一下，这是什么问题？

[claude]

Claude finished @appergb's task in 3m 37s —— View job

---

审查报告

• 收集上下文
• 查找相关代码
• 分析根因
• 完成报告

---

问题本质

这是一个 WebKitGTK (Linux) 上 CSS 自定义滚动条的合成层绘制问题，与 stacking context / z-index 无关，本质是渲染器 bug。

---

DOM 树结构（关键）

FloatingShellBody (position: relative)
├── Main shell (position: relative; z-index: 1; overflow: hidden)
│   └── main.ol-console-main (overflow: hidden; backdrop-filter: blur)
│       └── div.ol-thinscroll                          ← FloatingShell.tsx:357
│             overflow: auto
│             will-change: opacity, transform, filter  ← 关键 ①
│             animation: ol-page-slide / ol-page-fadeout
│           └── <History /> 页内容
│               ├── div.ol-thinscroll (overflow: auto) ← History.tsx:208  关键 ②
│               └── Card.ol-thinscroll (overflow: auto)← History.tsx:257  关键 ③
│
└── <SettingsModal /> (position: absolute; z-index: 50) ← 被盖在上面

---

根因逐层分析

① will-change 把页面滚动容器提升为 GPU 合成层

FloatingShell.tsx:369：

willChange: 'opacity, transform, filter',

这个属性会让浏览器把 ol-thinscroll 提升为独立的 GPU 合成层（compositing layer）。

② WebKitGTK 的 ::-webkit-scrollbar 绘制位于合成层之上

在 WebKitGTK（Linux/GTK）下，元素自绘的 ::-webkit-scrollbar 并不被约束在该元素所在的 CSS stacking context 内——渲染器会把它绘制在合成树（compositor tree）的最顶层。

这和 macOS 不同：macOS 的滚动条在未滚动状态下默认隐藏，不会出现此问题。

③ History 页面有两个独立的 ol-thinscroll 滚动区

History.tsx:208（左侧列表）和 History.tsx:257（右侧详情）各有自己的滚动条。即使修复了 FloatingShell 层的主滚动容器，页面内部这两个也同样会穿透。

④ z-index: 50 的 SettingsModal 为什么无效

SettingsModal 是 FloatingShellBody 的直接子元素，与 Main shell（z-index: 1）同级，理论上 50 > 1 应该覆盖正确。但问题不在 stacking context，而在 WebKit 合成器在 CPU/GPU 分界处忽略了 z-order：合成层的滚动条在被 composite 时直接叠到最终帧的最上方。

⑤ 为什么 position: fixed 也无效

如果 SettingsModal 的任一祖先拥有 transform / filter / backdrop-filter，该祖先就会成为 fixed 元素的包含块。main.ol-console-main 上的 backdropFilter: 'blur(18px) saturate(170%)' 正是其一。即使改成 fixed，模态也仍被约束在这个合成边界内，滚动条仍可穿透。

---

推荐修复：React Portal + position: fixed

最小改动、最彻底：把 SettingsModal 通过 createPortal 渲染到 document.body，完全脱离当前 DOM 树和合成层上下文。

SettingsModal.tsx 改动：

import { createPortal } from 'react-dom';

export function SettingsModal(...) {
  // ...现有逻辑不变...

  return createPortal(
    <div
      onClick={onClose}
      style={{
        position: 'fixed',   // 由 absolute 改为 fixed（portal 在 body 下）
        inset: 0,
        zIndex: 9999,        // 在 body 下无需再与页面内元素竞争，但建议用一个明确的大值
        // ...其余样式不变...
      }}>
      {/* ...内容不变... */}
    </div>,
    document.body            // ← portal 挂载点
  );
}

portal 后 React 的合成事件仍然沿 React 树向上冒泡（而非 DOM 树），不影响 onClose 等回调。

---

备选方案：设置打开时用 JS 隐藏滚动条

// FloatingShell.tsx
useEffect(() => {
  if (settingsOpen) document.body.classList.add('ol-no-scroll');
  else document.body.classList.remove('ol-no-scroll');
  return () => document.body.classList.remove('ol-no-scroll');
}, [settingsOpen]);

/* tokens.css */
.ol-no-scroll .ol-thinscroll::-webkit-scrollbar { display: none; }
.ol-no-scroll .ol-thinscroll { scrollbar-width: none; }

缺点：需要改 CSS + JS，且不能处理 SettingsModal 内部自己的 ol-thinscroll（虽然那个不受影响，但整体方案不够干净）。

---

结论

方案	侵入性	可靠性	推荐
React Portal	低（仅改 SettingsModal）	高（彻底脱离合成层）	✅ 首选
overflow: hidden on open	中（需改多处页面组件）	中（遗漏的 scrollable 区仍会穿透）	备选
isolation: isolate / z-index	-	无效（已验证）	❌
position: fixed	-	无效（ancestor backdrop-filter 锁定包含块）	❌

如需我实现 Portal 方案，请告知。

[aeoform]

经过我的测试，发现这不可以。