In my web page, I have created a simple footer that shows the currently playing track title and includes an HTML audio player. The layout looks great on desktop browsers and Android devices, but on iOS, the player is positioned far below the footer.
To adjust its position on iOS, I tried adding a "bottom-margin: xx%;" in the media query section of my CSS for specific iPhone/iPad models. However, this caused compatibility issues with other Android devices as the raised player now covers the track title.
Queries:
1) Why does the div appear correct with "bottom: 0;" but not the player on iOS?
2) If this is a WebKit bug, is there a way to target only iOS devices for raising the player?
The relevant HTML snippet:
<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 essential CSS code that should work on 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;
}
Additional CSS modifications made to display the player correctly on certain 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*/
}}