Playback ruler labels stretch or shrink when resizing the window

未关闭
  • 哪里不对？
#3,010 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

维护者通常 1 天内回复

还没有人认领这个 Issue。

评估

难度
3/5
预计耗时
1-2 天
新手友好度
65/100
Issue 类型
缺陷
描述清晰度
描述清楚
活跃度
活跃
技术栈
typescript, web-dev
领域
frontend

调研方向

Start by running the Playground Control demo at /demos/control/ and reproduce the ruler distortion while resizing the browser from about 900 to 3440 pixels wide. Read the playback ruler implementation and its resize-related tests or entry points to locate how label dimensions respond to available width. Done means text and symbols retain their size while the visible ticks and labels adapt to the available space.

由索引模型根据 Issue 内容生成。

描述

ai-authored

[!NOTE]
AI-authored disclosure (alphatab-ai-authored-v1)

Portions of this content were authored by an AI agent. The agent has read
AGENTS.md and the human submitter accepts responsibility for
compliance with the rules in that document.

Is there an existing issue for this?
  • I have searched the existing issues
I have read the contribution rules
  • I have read CONTRIBUTING.md and AGENTS.md.
AI authorship

AI-assisted (disclosure block included as described in AGENTS.md)

Current Behavior

In the Playground Control demo, the bar numbers and tempo labels on the playback ruler stretch horizontally as the window becomes wider and shrink as it becomes narrower. On a 3440-pixel-wide window the symbols and numbers become visibly distorted.

Expected Behavior

Text and symbols on the playback ruler remain the same size when the window width changes. The number of visible ticks and labels can adapt to the available space.

Steps To Reproduce
  1. Run the Playground Control demo from the develop branch.
  2. Open /demos/control/ in Chrome and wait for the sample score to load.
  3. Resize the browser window from approximately 900 pixels to 3440 pixels wide.
  4. Observe the bar numbers and tempo labels in the playback ruler.
Link to jsFiddle, CodePen, Project

Local checkout of CoderLine/alphaTab at commit 7d3efe78e9d00744e20d6db656518a5e45b93f7a.

Version and Environment

The checkout's package version is 1.10.0. The actual debug output below reports older generated version metadata (1.9.0, commit bf3fc48f), which does not match the checkout above.

[AlphaTab][VersionInfo] alphaTab 1.9.0
[AlphaTab][VersionInfo] commit: bf3fc48f53d899ccb60454385001787132e04eca
[AlphaTab][VersionInfo] build date: 2026-10-07T08:47:05.171Z
[AlphaTab][VersionInfo] High DPI: 2
[AlphaTab][VersionInfo] Platform: BrowserModule
[AlphaTab][VersionInfo] WebPack: false
[AlphaTab][VersionInfo] Vite: false
[AlphaTab][VersionInfo] Turbopack: false
[AlphaTab][VersionInfo] Browser: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/156.0.0.0 Safari/537.36
[AlphaTab][VersionInfo] Window Size: 3440x1288
[AlphaTab][VersionInfo] Screen Size: 1800x1169
Platform

Web

Anything else?

A possible fix is available in my fork: https://github.com/sgabenov/alphaTab/commit/00b7d7affe4832ad761622937562de94c69af46a

Screenshots

Playground at 3440 px before the fix, followed by the ruler before and after the fix at the same width:

Original Playground — 3440 px

Image

Ruler before the fix

Ruler before the fix

Ruler after the fix

Ruler after the fix
主要语言
TypeScript
星标
1.9k
派生
297
平均合并
1 小时 51 分钟
30 天内合并 PR
58

环境准备

这个项目没有提供开发容器、Dockerfile 或贡献指南，环境需要你自己搭建：先看它的 README，通用步骤见我们的新手贡献指南。

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

CoderLine/alphaTab 的其他 Issue

查看 CoderLine/alphaTab 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。