diff --git a/packages/playground/src/apps/ControlApp.ts b/packages/playground/src/apps/ControlApp.ts
index d3af97c6a..b985b7484 100644
--- a/packages/playground/src/apps/ControlApp.ts
+++ b/packages/playground/src/apps/ControlApp.ts
@@ -118,7 +118,6 @@ export class ControlApp implements Mountable {
                     </div>
                 </div>
                 <div class="cmp-footer"></div>
-                <div class="cmp-selection-handles"></div>
             </div>
         `);
 
@@ -138,11 +137,8 @@ export class ControlApp implements Mountable {
             '.cmp-footer',
             new Footer(this.api, { trackList: this.sidebar.trackList })
         );
-        this.selectionHandles = mount(
-            this.root,
-            '.cmp-selection-handles',
-            new SelectionHandles(this.api, viewport)
-        );
+        this.selectionHandles = new SelectionHandles(this.api, viewport, canvas);
+        canvas.appendChild(this.selectionHandles.root);
         this.crosshair = new Crosshair();
         this.dragDrop = new DragDrop(this.api, {
             onEnter: () => this.overlay.enterDrag(),
diff --git a/packages/playground/src/components/SelectionHandles.ts b/packages/playground/src/components/SelectionHandles.ts
index e471f779d..fba77fac2 100644
--- a/packages/playground/src/components/SelectionHandles.ts
+++ b/packages/playground/src/components/SelectionHandles.ts
@@ -70,7 +70,8 @@ export class SelectionHandles implements Mountable {
 
     constructor(
         private api: alphaTab.AlphaTabApi,
-        private viewportEl: HTMLElement
+        private viewportEl: HTMLElement,
+        private canvasEl: HTMLElement
     ) {
         this.root = parseHtml(html`
             <div class="at-selection-handles">
@@ -127,9 +128,14 @@ export class SelectionHandles implements Mountable {
     }
 
     private beatFromEvent(e: MouseEvent): alphaTab.model.Beat | undefined {
-        const rect = this.viewportEl.getBoundingClientRect();
-        const relX = e.clientX - rect.left;
-        const relY = e.clientY - rect.top;
+        const surface = this.canvasEl.querySelector<HTMLElement>('.at-surface');
+        if (!surface) {
+            return undefined;
+        }
+        // Bounds are relative to the score surface, not the scrolled viewport.
+        const rect = surface.getBoundingClientRect();
+        const relX = (e.clientX - rect.left) * (surface.offsetWidth / rect.width);
+        const relY = (e.clientY - rect.top) * (surface.offsetHeight / rect.height);
         const beat = this.api.boundsLookup?.getBeatAtPos(relX, relY);
         if (!beat) {
             return undefined;