问题
Linux (WebKitGTK) 下,启动时显示的「OpenLess 正在启动」pill 图标无法在窗口中居中。
现象
- 上下居中正常,左右始终不对
window.innerWidth 定位 → 水平略偏右(疑似含虚滚动条占位 ~15px)
document.documentElement.clientWidth 定位 → 水平左对齐(启动期 clientWidth 为 0 或不稳定中间值)
已排除的方案(共 8 轮尝试)
| # |
方案 |
结果 |
| 1 |
CSS Grid placeItems:center (inside WindowChrome) |
不居中 |
| 2 |
CSS position:absolute + translate(-50%,-50%) (inside WindowChrome) |
不居中 |
| 3 |
CSS position:fixed + flexbox (inside WindowChrome) |
不居中 |
| 4 |
JS innerWidth/innerHeight 像素定位 + rAF 循环 |
上下居中,左右不居中 |
| 5 |
JS clientWidth/clientHeight 像素定位 + 合理性检查 |
上下居中,左右左对齐 |
| 6 |
CSS left:50%;top:50% + translate(-50%,-50%) (WindowChrome sibling) |
不居中 |
| 7 |
原生 DOM createElement 挂 document.body(无 React、无 backdropFilter、无 transform、固定负 margin) |
不居中 |
| 8 |
启动期不渲染 WindowChrome,仅显示 pill |
不居中 |
根因分析
问题在 WebKitGTK 层面,非前端 CSS/JS 可修复:
WEBKIT_DISABLE_COMPOSITING_MODE=1 和 WEBKIT_DISABLE_DMABUF_RENDERER=1 已在 main.rs 设置
visible:false → show() 后的 nudge workaround(±1px resize)已在 lib.rs 实现
- WebKitGTK 启动期 viewport 宽度与窗口实际宽度不一致:
clientWidth 在 GTK size-allocate 完成前持续为 0
innerWidth 含虚滚动条占位偏移
- resize 事件可能不触发
- 不论 CSS 百分比、JS 像素计算、还是原生 DOM,都无法获得正确 viewport 宽度
可能方向
- 检查是否需要在 Rust 侧延迟
show() 直到 GTK widget 完成 size-allocate
- 检查
decorations: true 在 Linux 下是否与自定义标题栏冲突(commit 4254d83 提到要用 decorations: false但 tauri.conf.json 仍为 true)
- 考虑
visible: true 直接启动(跳过 visible:false → show() 流程)
- cc-switch 项目是否有更新的 workaround
相关文件
app/src/App.tsx — StartupShell 组件,当前位于 WindowChrome 兄弟节点
app/src-tauri/src/main.rs — WebKit 环境变量
app/src-tauri/src/lib.rs — Linux nudge workaround
app/src-tauri/tauri.conf.json — window decorations 配置
app/src/components/WindowChrome.tsx — Linux 自定义标题栏
环境
- Tauri v2 (
~2.11)
- WebKitGTK 2.52
- Linux Wayland (KDE)
问题
Linux (WebKitGTK) 下,启动时显示的「OpenLess 正在启动」pill 图标无法在窗口中居中。
现象
window.innerWidth定位 → 水平略偏右(疑似含虚滚动条占位 ~15px)document.documentElement.clientWidth定位 → 水平左对齐(启动期clientWidth为 0 或不稳定中间值)已排除的方案(共 8 轮尝试)
placeItems:center(inside WindowChrome)position:absolute+translate(-50%,-50%)(inside WindowChrome)position:fixed+ flexbox (inside WindowChrome)innerWidth/innerHeight像素定位 + rAF 循环clientWidth/clientHeight像素定位 + 合理性检查left:50%;top:50%+translate(-50%,-50%)(WindowChrome sibling)createElement挂document.body(无 React、无 backdropFilter、无 transform、固定负 margin)根因分析
问题在 WebKitGTK 层面,非前端 CSS/JS 可修复:
WEBKIT_DISABLE_COMPOSITING_MODE=1和WEBKIT_DISABLE_DMABUF_RENDERER=1已在main.rs设置visible:false → show()后的 nudge workaround(±1px resize)已在lib.rs实现clientWidth在 GTK size-allocate 完成前持续为 0innerWidth含虚滚动条占位偏移可能方向
show()直到 GTK widget 完成 size-allocatedecorations: true在 Linux 下是否与自定义标题栏冲突(commit 4254d83 提到要用decorations: false但tauri.conf.json仍为true)visible: true直接启动(跳过visible:false → show()流程)相关文件
app/src/App.tsx—StartupShell组件,当前位于WindowChrome兄弟节点app/src-tauri/src/main.rs— WebKit 环境变量app/src-tauri/src/lib.rs— Linux nudge workaroundapp/src-tauri/tauri.conf.json— window decorations 配置app/src/components/WindowChrome.tsx— Linux 自定义标题栏环境
~2.11)