How to change the dropdown position of the HTML5 audio player when CSS zoom is applied?

Question

This issue happens in Chrome, Brave and even Internet Explorer/Edge:

When clicking the three dots to open the dropdown, the dropdown is far away from the audio player:

With Webdeveloper I cannot target the dropdown. It seems to be directly from the browser.

So how to change its position to be directly at the three dots of the HTML audio embed?

Update:

I found out that the issue is the CSS zoom that is used on the audio element:

audio {
    zoom: 80%;
}

This repositions the dropdown!

Sidenote: The zoom is needed to present the audio embed in a proper porportion, so the audio timeline shows up wider. Due to the HTML layout on our site, the maximum width we can use is 250px.

Without zoom:

With zoom:

Summed up:

We need the zoom but it misplaces the dropdown. How to fix this? So the audio player dropdown is at the correct/default position.

Answer 1

As per the MDN webdocs zoom is a non-standard feature and should't be used in production code.

The docs suggests to use transform: scale() instead. So you could use it like this:

p {
  font-size: 2rem;
}

audio {
  width: 250px;
  height: 1em;
  margin: 0 -0.8em 0 -0.8em;
  transform: scale(80%);
  transform-origin: bottom;
}

<p>Lorem ipsum dolor sit amet, conse do eiusmod aliqua. Ut enim ad minim, quis nostrud ullamco <audio controls src="https://github.com/rafaelreis-hotmart/Audio-Sample-files/raw/master/sample.mp3"
    controls></audio> laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

Note the audio height and margins are using em units that means they are relative to the parent <p> element.