Controller injected on <audio> is positioned at ~2× its offset, inflating page scrollHeight and adding huge empty space below the page

[katanumahotori]

Bug Description

When VSC injects its controller onto an <audio> element that lives inside a position: relative (or otherwise positioned) container, the controller's absolute top is set to the media element's document offset again on top of the offset already contributed by the positioned ancestor. The result is the controller landing at roughly 2× the media element's Y position, far below the actual page content. This inflates document.documentElement.scrollHeight and produces a large empty/scrollable white area below the page footer.

Steps to Reproduce

1. Install VSC, open this public page in Chrome: https://katanumahotori.com/blog/sorami-kohaku-interview
2. The page contains two embedded podcast players, each rendered as an HTML5 <audio> element inside a position: relative card wrapper. The second one sits at about y = 26790px.
3. Scroll to the bottom: there is ~24,000px of empty scrollable space below the footer.

Root cause (observed in DOM)

• Clean browser (no extensions): document.documentElement.scrollHeight ≈ 25,763px, footer is the last element (gap below footer = 0).
• With VSC enabled: scrollHeight ≈ 53,639px.
• The extra height is caused by a single VSC node:
  <div id="controller" class="vsc-controller" style="top: 26789.9px; left: 616.6px; opacity: 0.3;"> whose rendered position (getBoundingClientRect().top + scrollY) is ≈ 53,608px — i.e. its CSS top (the audio's offset, 26,790px) is added on top of its positioned parent already at ~26,790px, doubling it.
• Only the second <audio> (deeper in the page, inside the positioned wrapper) is affected. A media element near the top is fine.

Expected

The controller should be positioned relative to its media element (or appended in a way that doesn't double-count the offset), so it doesn't extend the document's scrollable height.

Environment

• VSC: 0.10.2
• Chrome on Windows 11
• Reproducible on the public URL above (no login required)

[masachika-kamada]

I reproduced the same double-offset / inflated scrollHeight issue with a <video> element, not only with <audio>.

Reproduction page:
https://github.com/masachika-kamada/ChatGPT-Ctrl-Enter-Sender

The README contains a direct MP4 link. On GitHub's rendered page, it is loaded as an HTML5 <video> element.

With VSC enabled:

• document.body.scrollHeight: 3856
• document.documentElement.scrollHeight: 5462

After removing vsc-controller, document.documentElement.scrollHeight drops to 3856, and the large blank area after the GitHub footer disappears.

In DevTools, both the outer vsc-controller host and the Shadow DOM #controller had approximately the same computed top value (2722px). This appears to apply the page offset twice.

This temporary override fixes both the extra scrollable space and the controller placement:

const host = document.querySelector("vsc-controller");

host.style.setProperty("top", "0px", "important");
host.style.setProperty("left", "0px", "important");

The current master branch already has the equivalent base CSS:

vsc-controller {
  top: 0;
  left: 0;
}

Could someone confirm whether that change fixes this GitHub <video> case too, and include it in the next published extension release?