I have HTML <audio> elements in a page. The page and the audio elements look and work fine on a computer in all browsers. When the page first loads in Safari on iOS, the audio elements/players look ok. But, when I pinch the page to be smaller, the audio players shrink down to just a play button and they display on top of neighboring elements - the player buttons are actually quite large relative to the neighboring elements (see the screenshot below).
When I open the page (which is NOT optimized for mobile) in Safari, it looks like this.
When I pinch the page, it looks like this
The code is simple: Each audio on the page is defined like this:
<audio controls="controls" controlsList="nodownload">
<source src="http://somesite.com/music/some-song.mp3" type="audio/mpeg">
Your browser does not support the 'audio' element
</audio>
and there's some CSS that I have played around with to try to make it work and it currently is:
audio {
height: 25px;
min-height: 10px;
padding: 2px 0px 2px 0px;
display: block;
}
What's going on? Is there a fix?