Sidebar renders gray in Safari (semi-transparent oklab background compositing)

[vecStardo]

环境 / Environment

• zcode-webui: @aixyzstudio/zcode-webui 0.1.0（git main，codeload 拉取）
• renderer: ZCode 3.9.2（vendor/renderer/，.version=3.9.2）
• 运行时: 官方 zcode-server.cjs + 内置 node v22.16.0（ZCODE_SERVER_RUNTIME_ROOT=~/.zcode/server）
• 问题浏览器: macOS Safari 26.2；对照浏览器: Chrome（正常）

现象 / Symptom

自托管 webui，用 Safari 打开后，左侧面板（侧边栏）整体发灰（灰蒙蒙、约 #777 的浅灰），其他区域（主区为黑色）正常。用 Chrome 打开完全正常。

复现 / Repro

1. 部署 zcode-webui，浏览器打开 http://<host>:3102/（登录后进入）。
2. Safari 打开 → 侧边栏发灰；Chrome 打开 → 正常。

定位（computed style 证据）/ Root cause evidence

在 Safari Web Inspector 对当前页面读取所得：

• CSS.supports('color','oklch(0 0 0)') = true
• CSS.supports('color','color-mix(in srgb, red 50%, blue)') = true
  → 不是颜色语法支持度问题（Safari 26 对 oklch/oklab/color-mix 的语法检测均通过）
• --color-background = #161616，--color-sidebar = #161616，--color-panel = #202020（主题变量值正确、未断链）
• body 的 background-color = rgba(0,0,0,0)（透明）
• 侧边栏容器 .flex.h-dvh.flex-col.overflow-hidden.border-border.text-foreground.bg-background-alt 的实际 background-color = oklab(0.28908 0 0 / 0.6)

根因判断：官方渲染层给侧边栏使用的是半透明颜色 oklab(0.28908 0 0 / 0.6)（tailwind utility bg-background-alt）。在 Chrome 下，这个半透明深灰叠在正确的不透明深色根背景（#161616）上，合成出正常深灰；但在 Safari 26，带 alpha 的 oklab 色彩合成（compositing）与 Chromium 存在差异——它叠在透明的 body（实际露出浏览器白底）上，合成成了浅灰。即：官方渲染层按 Electron/Chromium 优化，未针对 Safari 的半透明 oklab 合成做兼容。

临时 workaround（已验证有效）

在 zcode-webui 自己的注入层（web/bootstrap.js，非官方渲染层）加一段仅对 Safari 生效的样式：

.bg-background-alt{ background-color: oklab(0.28908 0 0) !important; }  /* 去掉 alpha，保留官方色相 */

（用 UA 判断 Safari/ 且非 Chrome/Chromium/Electron 才注入。）即把背景改为不透明的同色，Safari 下侧边栏即恢复为正常深灰。该改动不影响 Chrome，也未修改官方渲染层。

期望 / Suggestion

• 期望 Safari 下侧边栏与 Chrome 观感一致（深灰）。
• 建议官方渲染层对 Safari 做兼容：关键背景色（如 bg-background-alt）避免使用带 alpha 的 oklab，或为不支持的合成场景提供不透明 fallback / sRGB 兜底（例如 background-color: #2d2d2d; background-color: oklab(0.28908 0 0); 顺序声明），也可用 @supports 区分。

说明：本报告由 AI（Hermes Agent）辅助定位与整理，帮助复现与排查。