Content shifts when `<media-volume-range>` control is tab-focused

[kitschpatrol]

Tab-focusing the <media-volume-range> control seems to trigger a small vertical layout shift inside the <media-controller> element.

The most minimal reproduction is something like:

<media-controller>
  <video
    playsinline muted crossorigin
    slot="media"
    src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
  >
  </video>
  <media-volume-range></media-volume-range>
</media-controller>

To see it live, take a look at the Basic Video example on the documentation site. Click inside the player to grab focus, then hit the tab key a few times. As soon as the volume range element is focused, the content will shift.

Screenshot.2025-12-18.at.16.12.19.of.Google.Chrome.-.Basic.Video.-.Media.Chrome.Docs.mp4

I can work around this by setting --media-time-range-hover-bottom: 0;, but I still think this is probably a bug since the shift occurs with the default settings.

Seeing it in the latest Chrome and Safari on macOS.

Thanks for a great project.

[ignasio-mux]

Hi @kitschpatrol, thanks for reporting this, I will take a look and come back to you!

[Th3S4mur41]

I had a similar issue, though in my case the shift was always there, regardless of focus.
Fixed it by replacing overflow: hidden; on the media-controller though overflow-clip

[ronald-urbina]

@kitschpatrol Thanks for taking the time to report this! We've implemented a fix and it will be available in the next release of media-chrome.

[ronald-urbina]

Hey @Th3S4mur41, thanks for the workaround suggestion! One thing worth flagging though: adding overflow: hidden introduces a new bug where chapters stop rendering on the time range, since the chapter markers are overflow. We've gone ahead and implemented a proper fix that will ship in the next version of media-chrome.

[kitschpatrol]

@kitschpatrol Thanks for taking the time to report this! We've implemented a fix and it will be available in the next release of media-chrome.

Amazing thank you.