Coordinate anchoring for custom position: fixed cursor in Landscape Strip Mode

[AvaTheArchitect]

I'm implementing a custom FixedLandscapeCursor (a position: fixed overlay mounted to document.body) to bypass stacking context and header-clipping issues in landscape.

Since the notation scrolls horizontally under a static cursor, we aren't using standard AlphaTab beat coordinates for X. However, we're hitting a wall with Y-anchoring.

On mobile Safari (PWA mode), alphatab-container.getBoundingClientRect().top often returns 0 even when a fixed TopMenuTray is present. When we attempt to 'floor' the cursor to the header's bottom or use a visual top calculation, the cursor is currently jumping halfway off the top of the screen.

The Question:
What is your recommended way to reliably fetch the absolute viewport Y-origin of the first staff line when the AlphaTab container is visually offset by fixed UI elements? Is there a specific internal AlphaTab property or a DOM anchor you'd suggest targeting that survives the landscape '0-top' reporting bug?"

Note: The images below yes the canvas is not quite centered partially because many of these gp8 files are using lane overlays and they use negative numbers for them I found, which is an entirely different language than alphaTab. So that is a separate work in progress. But otherwise you can see the issues with trying to get the custom FixedLandscapeCursor.tsx even close to the Notation.

First attempt got stuck under the TopMenuTray:

. . . **Second attempt the cursor styling math is different got that better but it didn't move:** . .

Third attempt it went the wrong direction and started moving off the stop of the screen in Landscape mode:

[Danielku15]

this doesn't sound like a alphaTab problem, but a general browser problem. Within the alphaTab viewport you can get positions via BoundsLookup, but to get the coordinate of the container element is logic outside of alphaTab. It surprises me that getBoundingClientRect doesn't work well in Safari, sounds like a bug on their side.

But even if its not alphaTab specific: You should be able to solve this with reorganizing your DOM hierarchy. put alphaTab and your cursor into the same div. mark the wrapper as position: relative and the cursor to position: absolute.

position: absolute positions elements relative to the next higher position: relative container. this way you stay within your wrapper element which is shared with alphaTab. Its a bit complex but basically like this:

https://jsfiddle.net/danielku15/mq1L7uv8/

overall it depends on your page layout. but instead of computing and positioning the cursor, you would lock the cursor via CSS inside the parent container. Then you ensure scrolling happens only on alphaTab which is "filling" the same container.

There might be other/cleaner css tricks to achieve the same, but just quickly fiddled together this should match your needs.