How to correctly position the iOS audio player within the footer?

Question

I've made a simple footer in a web page which displays the currently playing track title and contains the default HTML audio player.
It is rendered well on all desktop browsers and on the Android ones, but on iOS the player is displayed way below the footer.

The only way I've found to raise its position is adding a "bottom-margin: xx%;" on the media query section of my css, according to the iPhone/iPad model, but this breaks the compatibility with every other Android mobiles, since now the raised player is covering the track title.

Questions:
1) Why on iOS, with "bottom: 0;" the div seems ok but the player doesn't?
2) If this is a but of some kind of WebKit, is there a way to raise the player only on iOS devices?

---

The relevant HTML part:

<div id="track-info">
  <p>Now playing: <span id="track-title">Please select a radio stream</span></p>
  <audio id="radio-js" class="radio-player" controls>
    <source src="" type="audio/mpeg">
  </audio>
</div>

The relevant CSS part, which should be ok even for mobiles:

/* global */
#track-info {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    margin-top: 30%;
    padding-bottom: 2%;
    background-color: blue;
}
.radio-player {
    position: inherit;
    width: 100%;
    left: 0;
    bottom: 0;
}

The additional CSS I've added to view the player on some iPhones

/* media query for portrait devices */
@media only screen and (orientation: portrait) {
.radio-player {
    position: inherit;
    width: 100%;
    left: 0;
    bottom: xx%; /* 3.5% for iPhones 5/5c/5s and 4.7% for iPhones 6/6s*/
}}

Answer 1

You can target only iOS devices with css. Put this into your css file:

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
    /* CSS overrides for mobile here */
}

In the head of your HTML file:

<meta name="viewport" content="width=device-width,initial-scale=1">