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!