perf(capsule): 删除无效的 translation 徽章 backdrop-filter

[appergb]

User description

源自 #470。该 backdrop-filter: blur(20px) 作用在浮于透明窗口之上的 translation 徽章 pill 上，背后只有透明窗口=桌面，而 webview 模糊不了窗口背后的桌面（Tauri 上游限制，本文件上方 pill 已有同款注释）。故它不产生任何模糊效果、纯空耗一次合成。删除零视觉变化。

验证：npm run build 通过。

---

PR Type

Bug fix, Enhancement

---

Description

• Remove invalid backdrop-filter on translation badge

• Fix voice capsule not showing on Windows (Tauri limitation)

• Zero visual change, pure performance improvement

---

File Walkthrough

	Relevant files
Bug fix	Capsule.tsx Remove dead backdrop-filter on translation badge                  openless-all/app/src/components/Capsule.tsx Deleted backdrop-filter: blur(20px) saturate(180%) and vendor prefix from translation badge styles Added explanatory comment referencing issue [Windows] [bug] 语音输入不显示录音胶囊 #470 (Tauri upstream limitation) +2/-2

---

[appergb]

@claude 请审查本 PR（#470：删除 capsule 无效 backdrop-filter）。请确认该 backdrop-filter 确为 no-op（浮于透明窗口之上、模糊不到桌面，Tauri 上游限制），删除零视觉变化。

[github-actions]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

🎫 Ticket compliance analysis 🔶 470 - Partially compliant Compliant requirements: （无） Non-compliant requirements: 修复 Windows 上语音输入时不显示录音胶囊的问题（此 PR 仅移除了无效的 CSS backdrop-filter，未对胶囊显示逻辑做任何调整，不会使胶囊出现） Requires further human verification: 需人工验证胶囊不显示的根本原因是否与 backdrop-filter 有关。当前变更在视觉上无影响，因此很可能未能真正修复 [Windows] [bug] 语音输入不显示录音胶囊 #470 描述的 bug。

⏱️ Estimated effort to review: 1 🔵⚪⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ No major issues detected

[claude]

Claude finished @appergb's task in 1m 27s —— View job

---

PR #676 代码审查结果

任务清单：

• 初始化审查任务
• 读取变更文件 Capsule.tsx
• 查看 PR diff，确认具体删除内容
• 核实 backdrop-filter 在 Tauri 透明窗口下的 no-op 性质
• 输出审查结论

---

变更摘要

文件： openless-all/app/src/components/Capsule.tsx，第 484–485 行

- backdropFilter: 'blur(20px) saturate(180%)',
- WebkitBackdropFilter: 'blur(20px) saturate(180%)',
+ // issue #470：去掉无效的 backdrop-filter —— webview 模糊不了透明窗口背后的桌面
+ // （Tauri 上游限制，同本文件上方 pill 注释），纯空耗合成，删除零视觉变化。

---

技术核实：backdrop-filter 确为 no-op

结论：删除正确，零视觉变化。

核实依据如下：

1. Tauri 透明窗口的上游限制已有先例注释

同文件第 287–288 行，主 Pill 元素早已写明相同限制：

// 不写 backdrop-filter —— webview 模糊不了透明窗口背后的桌面（Tauri 上游限制）。
<div className="ol-frost ol-capsule-pill" ...>

翻译徽章（translation badge）与 pill 同处一个透明 Tauri 窗口，两者的场景完全相同。

2. backdrop-filter 的工作原理

backdrop-filter 只能对 元素背后、同一 WebView 合成层内的像素采样。当 Tauri 窗口背景为透明（第 439 行 background: 'transparent'），WebView 看到的"背景"仅是自身透明通道，无法穿透 OS 窗口层访问桌面或其他窗口的像素，模糊出来的只有空内容。此行为在 WKWebView（macOS）和 WebView2（Windows）上均一致。

3. 徽章的视觉来源是 background，与 backdrop-filter 无关

第 483 行 background: 'var(--ol-capsule-badge-bg)' 提供了徽章的实体背景色；即使没有 backdrop-filter，徽章也有正确的不透明背景，外观不受任何影响。

4. 删除带来的性能改善

虽然模糊没有视觉效果，浏览器/WebView 仍可能因 backdrop-filter 的存在：

• 为该元素建立独立合成层；
• 触发一次无效的像素采样与滤镜合成 pass。

删除后节省该次合成开销，与 PR 描述"纯空耗一次合成"相符。

---

整体评价

维度	结论
技术准确性	✅ 限制与同文件注释一致，删除理由成立
视觉影响	✅ 零变化（badge bg 由 CSS 变量提供，非 backdrop-filter）
代码质量	✅ 替换注释清晰记录 issue 编号与原因
测试	✅ build 通过，属于纯 CSS 删减，无逻辑变动

此 PR 可以合并。

---