Skip to content

fix(linux): fallback from backdrop-filter when WEBKIT_DISABLE_COMPOSITING_MODE=1#570

Merged
H-Chris233 merged 1 commit into
Open-Less:betafrom
H-Chris233:fix/linux-frosted-glass-553
Jun 1, 2026
Merged

fix(linux): fallback from backdrop-filter when WEBKIT_DISABLE_COMPOSITING_MODE=1#570
H-Chris233 merged 1 commit into
Open-Less:betafrom
H-Chris233:fix/linux-frosted-glass-553

Conversation

@H-Chris233
Copy link
Copy Markdown
Collaborator

@H-Chris233 H-Chris233 commented Jun 1, 2026 •
edited by github-actions Bot
Loading

User description

Closes #553

问题

Linux 上 WEBKIT_DISABLE_COMPOSITING_MODE=1（由 main.rs 设置，用于修复 tauri#9394 窗口点击无响应）会禁用 WebKitGTK 合成层，导致 CSS backdrop-filter 在 DOM 重排后失效。具体表现：

  • 鼠标在历史词汇表上 hover → 磨砂消失
  • 选中历史词汇表条目 → 右侧面板刷新 → 磨砂消失
  • 调整窗口大小后恢复

方案

前端初始化时通过 Tauri command 探测环境变量，检测到 WEBKIT_DISABLE_COMPOSITING_MODE=1 时用 CSS 数据属性切换三处 backdrop-filter 到渐变+噪点纹理的假磨砂方案：

元素 正常 Fallback
WindowChrome 底板 渐变 + blur(36px) 渐变(opacity↑) + 噪点纹理(opacity 0.20)
主面板 <main> rgba(255,255,255,0.62) + blur(18px) rgba(255,255,255,0.80) 不透明白底
Linux 标题栏 rgba(245,245,247,0.85) + blur(12px) rgba(245,245,247,0.95) 不透明白底

文件改动

文件 改动
src-tauri/src/commands.rs 新增 is_no_compositing_mode command
src-tauri/src/lib.rs 注册 command
src/App.tsx 首屏 useEffect 调用 + 设 data-ol-no-compositing
src/styles/global.css 3 条 !important 回退规则（带 isolation: isolate）
src/components/WindowChrome.tsx 加 ol-winchrome / ol-linux-titlebar class
src/components/FloatingShell.tsx <main> 加 ol-console-main class

验证

  • Rust cargo check ✅
  • TypeScript tsc --noEmit ✅

测试

需要 Linux 用户拉本地编译验证。

PR Type

Bug fix, Enhancement

Description

  • Add Rust command to detect WEBKIT_DISABLE_COMPOSITING_MODE

  • Frontend sets data attribute on startup

  • CSS fallback replaces backdrop-filter with gradient + noise texture

  • Add class hooks to WindowChrome and FloatingShell components

Diagram Walkthrough

flowchart LR
  A["Rust: is_no_compositing_mode command"] --> B["App.tsx: invoke on startup"]
  B --> C["Set data-ol-no-compositing on <html>"]
  C --> D["CSS: !important fallback rules"]
  D --> E["WindowChrome backdrop-filter replaced"]
  D --> F["Linux-titlebar backdrop-filter replaced"]
  D --> G["Console-main backdrop-filter replaced"]
Loading

File Walkthrough
Relevant files
Enhancement
commands.rs
Add command to detect compositing mode                                     

openless-all/app/src-tauri/src/commands.rs

  • Added is_no_compositing_mode command returning bool
  • Checks WEBKIT_DISABLE_COMPOSITING_MODE env var
 +6/-0     
App.tsx
Initialize compositing detection on load                                 

openless-all/app/src/App.tsx

  • Added import for invoke
  • Added useEffect to call command on startup for Linux
  • Sets data-ol-no-compositing on document element when true
 +13/-0   
FloatingShell.tsx
Add class to main console area                                                     

openless-all/app/src/components/FloatingShell.tsx

  • Added className ol-console-main to <main> element
 +1/-0     
WindowChrome.tsx
Add class hooks for CSS fallback                                                 

openless-all/app/src/components/WindowChrome.tsx

  • Added className ol-winchrome to outer container
  • Added className ol-linux-titlebar to Linux titlebar
 +5/-0     
Configuration changes
lib.rs
Register new Tauri command                                                             

openless-all/app/src-tauri/src/lib.rs

  • Registered is_no_compositing_mode command
 +1/-0     
Bug fix
global.css
Add CSS fallback for no-compositing mode                                 

openless-all/app/src/styles/global.css

  • Added fallback rules for data-ol-no-compositing
  • Override backdrop-filter with gradient+noise texture
  • Applied to .ol-winchrome, .ol-console-main, .ol-linux-titlebar
 +50/-0   

@H-Chris233
fix(linux): fallback from backdrop-filter when WEBKIT_DISABLE_COMPOSI…
c45b6c0 
…TING_MODE=1

Issue Open-Less#553: Linux 上 WEBKIT_DISABLE_COMPOSITING_MODE=1 时 WebKitGTK backdrop-filter
在 DOM 重排后失效（hover 历史词汇表 / 选择条目刷新面板）。

方案：
- Rust 端新增 is_no_compositing_mode command 暴露环境变量状态
- App.tsx 初始化时调用，写入 data-ol-no-compositing 到 <html>
- CSS 用 [data-ol-no-compositing] 选择器覆盖 inline style，切换到
  渐变+噪点纹理假磨砂方案（复用 tokens.css --ol-frost-grain）
- WindowChrome/FloatingShell 加 className 钩子

受影响的三处 backdrop-filter：WindowChrome 底板、主面板、
Linux 标题栏。ProviderPrompt/HotkeyModePrompt 弹窗遮罩
（瞬态 UI）跳过。提交签署：Reasonix Code
@H-Chris233 H-Chris233 mentioned this pull request Jun 1, 2026
Closed
@github-actions
Copy link
Copy Markdown

github-actions Bot commented Jun 1, 2026

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪
🧪 No relevant tests
🔒 No security concerns identified
⚡ No major issues detected

@H-Chris233 H-Chris233 merged commit 9b05ed0 into Open-Less:beta Jun 1, 2026
4 checks passed
@H-Chris233 H-Chris233 deleted the fix/linux-frosted-glass-553 branch June 1, 2026 02:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[linux] 磨砂效果有问题

1 participant

@H-Chris233