Skip to content

fix(chat): 折叠工具操作时下方消息不再闪动 - #1129

Merged
AlphaCatMeow merged 1 commit into
Stack-Cairn:mainfrom
AlphaCatMeow:fix-transcript-collapse-flicker
Nov 3, 2026
Merged

AlphaCatMeow merged 1 commit into
Stack-Cairn:mainfrom
AlphaCatMeow:fix-transcript-collapse-flicker

Conversation

@AlphaCatMeow

Copy link
Copy Markdown
Contributor

桌面端折叠工具组、工具卡、"已处理"时,下方消息会闪。原因是聊天列表把 ResizeObserver 的结算推迟到下一帧(useAnimationFrameWithResizeObserver,为 macOS WKWebView 加的),结算用的是上一帧记下的行高。折叠动画每帧都在改行高,下面的行总晚一帧,两行之间每帧露出空白,最大约 40px。

Closes #1128

改动

  • 推迟结算:以前用 ResizeObserver 交付的上一帧行高 → 现在读行的实时布局高度(offsetHeight,与 RO 的 border box 同为布局尺寸,不受祖先 transform 影响)。新模块 crates/agent-gui/src/pages/chat/transcript/measureRowLive.ts,在 TranscriptList 里设为 measureElement。
  • ref 回调路径(无 RO entry)不变,仍返回缓存值,不额外读布局。
  • 写入时机不变:仍在 rAF 里,不在 WebKit 的 resize 回调里写 DOM,保留 refactor(ui): unify styles, animations and shared components across Desktop, Gateway and agent-ui #824 的初衷。
  • 消费者:只有桌面 TranscriptList 开了推迟结算。WebUI 的 GatewayTranscript 在 RO 回调里同步结算,没有这个问题,未改;Gateway 同步无数据契约变化。

截图

桌面 1280(调试版,工具组展开 / 折叠后):

desktop 1280 expanded
desktop 1280 collapsed

WebUI 1280 折叠后 / 390 展开:

webui 1280 collapsed
webui 390 expanded

闪烁本身是帧间现象,截图看不出,逐帧数据见下。

验证

  • 基线:upstream/main b7a902a
  • 逐帧采样(调试版 tauri dev,MCP bridge,在每帧绘制后读 DOM;行间空隙 = 下一行顶 − 本行底):
场景 修复前最大空隙 修复后
1280×900 折叠"运行了命令"(365px) 39px 每帧 0
1280×900 展开 −4px(重叠) 每帧 0
1280×900 折叠"已处理"、单个工具卡 — 每帧 0
1280×450 停在底部时折叠 42px 每帧 0,scrollTop 轨迹与修复前一致
1280×450 上翻离底时折叠 37px 每帧 0,scrollTop 轨迹与修复前一致
390 宽折叠 — 每帧 0,无横向溢出
  • WebUI(连调试版 Gateway)1280 / 390:折叠时标题不动、下方正文随行高同步上移,无横向溢出。
  • 新增测试:
    • transcript-measure-live.test.mjs:用真实 virtual-core(crates/virtual-core/test/helpers/harness.mjs)加推迟 RO:折叠帧空隙为 0,默认测量器复现 20px 空隙;ref 回调路径不读布局;贴底非批处理路径的强制布局次数与默认一致。
    • chat-transcript-scroller.test.mjs:接线断言(选项启用且未被注释)。
    • 变异检查:对调分支 → 2 条失败;删除或注释接线 → 1 条失败。
  • 静态:typecheck ×3(ui / gui / webui)通过;biome(LF)通过;check-mirror 通过;git diff --check 通过。
  • 全量:la-full-tests 8 个批次全部运行,4492 项,通过 4488,失败 3,跳过 1。3 条均为已知环境失败:
    • Tauri backend cargo test suite:Rust 首次编译超过用例 180 秒上限,本 PR 不改 Rust。
    • native upload marker / backend connection planning:测试按 CWD 相对路径读源码,在 crates/agent-gui 下重跑 13/13 通过。
  • 对抗性复审两轮:第一轮 P2(原测试只匹配源码文本)已改为行为测试;第二轮未发现阻止合并的问题。

未覆盖

🤖 Generated with Claude Code

桌面端聊天列表把 ResizeObserver 的结算推迟到下一帧(为 macOS WKWebView
加的 useAnimationFrameWithResizeObserver),结算时用的是上一帧记下的行高。
工具组、工具卡、"已处理"的折叠动画每帧都在改行高,下面的行因此总晚一帧,
折叠时两行之间露出最大约 40px 的空白,看上去在闪。

- 推迟结算改为读行的实时布局高度(offsetHeight,不受祖先 transform 影响);
  ref 回调路径仍返回缓存值,不额外读布局
- 写入时机不变,仍在 rAF 里,不在 WebKit 的 resize 回调里写 DOM
- WebUI 的列表在 ResizeObserver 回调里同步结算,没有这个问题,未改

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@AlphaCatMeow
AlphaCatMeow merged commit 4773d12 into Stack-Cairn:main Nov 3, 2026
12 checks passed
@AlphaCatMeow
AlphaCatMeow deleted the fix-transcript-collapse-flicker branch November 3, 2026 00:44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

桌面端折叠工具操作时下方消息闪动

1 participant