Control playground: selection handles cannot be dragged after scrolling

[sgabenov]

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, if any AI agent helped draft this issue, AGENTS.md.

AI authorship

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

Current Behavior

In the Control playground, I can select a range of notes after scrolling down the score, but I cannot resize that range by dragging either visible edge. The selection highlight is visible, but its drag handles are outside the visible score area.

In the reproduced Chrome session, the selection occupied viewport y=70.59–273.59 px, while both active handle elements occupied y=5628.59–5831.59 px. The score viewport was scrolled by 5558 px. The handles were also 70 px left of the selection edges while the track sidebar was visible. Hit testing at the visible edges returned score elements rather than the handles.

Expected Behavior

Both handles should remain aligned with the selected range when the score is scrolled. Dragging either handle should change that boundary while preserving the opposite boundary.

Steps To Reproduce

1. Use upstream develop commit 1f428ccd1ea2faeeb1a8b48cb17194cfd60ba11e.
2. Install dependencies with npm ci, then run npm run generate-typescript.
3. Run npm run dev and open /demos/control/ in Chrome.
4. Keep the browser viewport wider than 1100 CSS pixels so the track sidebar is visible. The reproduced viewport was 1920 × 992.
5. Use the bundled score packages/alphatab/test-data/audio/full-song.gp5 and select the Emmpu(Acoustic) track in the sidebar.
6. Scroll down to the later measures, around bars 77–81.
7. Drag across several notes to create a playback selection.
8. Try dragging the left or right edge of the highlight to resize the selected range.
9. Observe that the visible edges do not expose the drag handles. Inspecting .at-selection-handle.active shows their bounding rectangles outside the visible viewport.

Link to jsFiddle, CodePen, Project

Control playground at the reproduced commit

The reproduction uses the existing bundled demo and score; no custom score or external service is required.

Version and Environment

• Platform: Web, local Vite Control playground.
• alphaTab: 1.9.0, built from 1f428ccd1ea2faeeb1a8b48cb17194cfd60ba11e.
• Local generated build date: 2026-09-08T17:06:23.581Z.
• macOS: 26.6.2, build 25G83 (sw_vers).
• Installed Google Chrome: 152.0.7977.76 (application bundle metadata).
• Reproduction viewport: 1920 × 992, observed in the browser screenshot.

The alphaTab version, commit and build date above are from the generated VersionInfo.ts used by this local build. They are not a pasted console log. Full alphaTab.Environment.printEnvironmentInfo() output was not captured.

Platform

Web

Anything else?

This report concerns resizing an existing selection in the Control playground. Creating a note-level selection works. The same misplaced-handle behavior was also observed in the Codex in-app browser.

An initial issue search found #2394, which concerns release availability of the selection API rather than this scrolled-playground behavior.

Related historical report: #952 described cursor/highlight displacement on alphaTab 1.2 and is closed. This report reproduces misplaced resize handles in the current develop Control playground while the selection highlight itself remains visible at the selected notes.