Repository navigation
fix: Windows 端串流后音量环动画持续卡顿(clip-path 回收至 Linux,串流循环动画改 CSS) - #367
Merged
OrientCOMPASS merged 1 commit intoOct 10, 2026
Merged
OrientCOMPASS merged 1 commit into
OrientCOMPASS merged 1 commit into
Conversation
OrientCOMPASS
force-pushed
the
fix/windows-streaming-ring-stutter
branch
from
October 9, 2026 15:20
b6e8b50 to
bed3680
Compare
v2.1.0 clipped the whole document with a rounded body clip-path and drove the two continuous streaming loops (central glow breathing, status dot pulse) through the anime.js v4 engine. On Windows WebView2 the document-wide rounded clip forces every composited frame through a clip render surface, and the JS engine ticked on the main thread against the high-rate audio IPC events — together they made the volume ring animation hitch continuously as soon as the first client started streaming. - scope the body clip-path to .platform-linux, matching the per-platform design of the frameless shell rework: Windows rounds via the DWM corner preference, macOS via the NSWindow corner radius from vibrancy - run the streaming loops as compositor-driven CSS keyframe animations (transform/opacity only, same durations and easing curves); anime.js stays for one-shot interactions (hover, click rebound) - round the plugin panel window root itself; that window never applied the platform classes and so no longer inherits a document clip Backend untouched; no version bump.
OrientCOMPASS
force-pushed
the
fix/windows-streaming-ring-stutter
branch
from
October 9, 2026 15:27
bed3680 to
c291de8
Compare
ChouChiu
approved these changes
Oct 9, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
为什么改
v2.1.0 在 Windows 实机上:启动后首次连接进入串流,主界面音量环动画出现不间断卡顿,像被反复短暂阻塞;空闲时不卡,一串流就卡。
此前怀疑过 DSP/ONNX 模型首包加载阻塞音频线程,做过「模型预热 + 陈旧积压丢弃」并在实机验证——症状无任何变化,已回滚,后端方向排除。
排查 2.1.0 前端改动后定位到两个回归点,都恰好只在串流期间持续生效:
全局
body { clip-path: inset(0 round 1rem) }(refactor: rework desktop windows around a self-drawn frameless shell #353 引入)。refactor: rework desktop windows around a self-drawn frameless shell #353 的圆角设计是分平台的:「Windows DWM 圆角偏好、macOS vibrancy、Linux clip-path」,但实现落在了全局 CSS,Windows/macOS 也被无差别裁剪。Chromium/WebView2 里文档级圆角裁剪让整页内容每帧都要经过带遮罩的合成表面;主窗口本身是透明 + acrylic 的重合成路径,串流时音量环每帧 rAF 写 SVG 属性、辉光/脉冲每帧弄脏页面,叠加每帧全窗口遮罩合成后持续掉帧——就是「不间断卡顿」的直接来源。该裁剪在 Windows 上冗余:Win11 有 DWM 圆角裁剪,Win10 回到 v2.0.3 的内容自绘圆角观感。anime.js v3→v4 后,两个无限循环动画跑在主线程(中央辉光呼吸 2s、底栏状态点脉冲 1.5s,均仅 streaming 状态运行)。v4 引擎每帧在主线程 tick 并写内联样式,与 ~8Hz 的 audio-level IPC 事件、Vue 重渲染、音量环自身的 rAF 循环争抢主线程,在被 ① 拖慢的合成路径上进一步放大掉帧。
已排除的方向(均有代码/实测证据):
AudioRing.vue两版无 diff;level/metrics 事件频率两版一致;jitter prebuffer 时间制只影响起播;queued_ms已由 8f3c4c3 改为原子读;anime.js 上游帧率缺陷(juliangarnier/anime#1112)在 4.3.0 已修复、本仓库锁定 4.5.0;windowEffects配置两版相同;useWindowEffects在非 Linux 平台一次性闩锁、无持续开销。改了什么
纯前端(CSS/Vue),后端零改动,未 bump 版本:
src/shared/assets/index.cssbody的 clip-path 移入.platform-linux body(App/设置窗口挂载时已由applyPlatformClasses()打类,Linux 行为不变;Windows 交还 DWM 圆角、macOS 交还 vibrancy)glow-breathe/dot-pulsekeyframes 与工具类:仅 transform/opacity,由合成器驱动,时长与缓动同原 anime 参数(2s inOutSine alternate / 1.5s inOutQuad),并自动被现有prefers-reduced-motion规则覆盖(原 anime 循环不理会该设置)src/App.vue:删除两个 anime.js 循环动画的watchEffect与相关 ref/变量,模板改用上述 CSS 类(辉光元素本身仅 streaming 挂载;状态点按状态绑定dot-pulse);anime.js 保留用于一次性交互(悬停、点击回弹);清理未用导入(watchEffect/utils/JSAnimation)src/features/plugins/components/PluginPanelWindow.vue:插件面板窗口根容器补rounded-2xl——该窗口不调用applyPlatformClasses,原先依赖文档级 clip 获得圆角,现在自绘(视觉上与原先一致,同为 1rem 圆角)AGENTS.md:记录平台化圆角策略与「持续动画走合成器 CSS 动画、JS 动画库仅用于一次性交互」的约定验证
.platform-linux下原样保留,KDE Wayland 原生模糊/阴影逻辑未动