Skip to content

修复原生缩放下预览尺寸与滚动条反复振荡 - #52

Merged
Xiiiing merged 1 commit into
mainfrom
codex/zoom-animation-stability
Oct 26, 2026
Merged

Xiiiing merged 1 commit into
mainfrom
codex/zoom-animation-stability

Conversation

@Xiiiing

@Xiiiing Xiiiing commented Oct 26, 2026

Copy link
Copy Markdown
Owner

问题与修复

Edge 110% 缩放后整幅预览持续抖动:整数 clientWidth/clientHeight 回写为固定像素尺寸,与实际小数容器产生溢出;经典滚动条出现和消失又触发 ResizeObserver,形成循环。旧版在 110% 下 90 帧触发 90 次 iframe resize。

自动画布和 iframe 改为百分比匹配真实容器;设备模拟使用 CSS min() 限制宽度并按实际计算宽度缩放。保留原尺寸滚动、动画、设备切换、详情和全屏行为。修复后相同条件 90 帧内 resize 为 0,预览位置与尺寸稳定。

验证

  • npm run check 通过,包含严格类型检查与 12 项单元测试。
  • npm test 先构建,再通过全部 156 项测试:Chromium 140、Firefox 8、WebKit 8;无跳过或 flaky。
  • npm run test:dev 通过;31 项定向回归通过。
  • 新测试使用完整 Chromium 的原生浏览器缩放,显式移除 Playwright 默认的隐藏滚动条参数。覆盖 100/110/125/150/175/200%、实时切换与重新载入、三种窗口、自动/375/768px/原始尺寸、详情和全屏;检查文档身份、输入保留和无重复文档请求。
  • 独立 Linux Edge 155.0.4283.62 和 Chromium 各 8 轮倍率检查,每轮 90 帧均零 resize、一个稳定状态。尚未在原生 Windows 上人工验证。
  • 对比数据、截图与复现说明见 docs/ui/native-zoom/。不修改依赖、归档演示代码或个人文件。

CI 成功后按已授权流程 Merge 合并,由既有 Pages 工作流发布,再检查线上 110% 原生缩放。

Closes #51

@Xiiiing
Xiiiing merged commit be75ffc into main Oct 26, 2026
1 check passed
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.

110% 原生缩放时预览尺寸取整导致滚动条反复出现、整幅 UI 抖动

1 participant