Playback ruler labels stretch or shrink when resizing the window

Aperta
  • Qualcosa non va?
#3,010 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
65/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
typescript, web-dev
Ambito
frontend

Direzione di ricerca

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.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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
Lingua principale
TypeScript
Stelle
1.9k
Fork
297
Merge medio
1h 51m
PR unite (30g)
58

Preparare l'ambiente

Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di CoderLine/alphaTab

Tutte le issue di CoderLine/alphaTab

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.