Styles apply improperly to an audio element when viewed on mobile - html

Question

Here is how the player should look like, the text and the play icon invert colors beneath them, so they are still visible. This works on PC:
However, on mobile browser (Safari) text inversion works, but the play button stays white so it's not visible when the progress bar passes through it:
Here is CSS for my player:
*:focus {
outline: none;
}
#audioshadow {
position: fixed;
bottom: 0;
}
#audioshadow img {
max-height: 1000px;
padding-bottom: 80px;
width: 100%;
z-index: 0;
transition: 0.4s ease-in-out;
max-width: 600px;
display: none;
}
#audiodiv:hover ~ #audioshadow img {
display: initial;
}
#volume-slider-container {
z-index: 1;
}
/* COLOR OVERLAY */
#color-switch {
width: 100%;
max-width: 608px;
height: 100%;
max-height: 38px;
position: relative;
}
#color-switch img {
position: absolute;
object-fit: cover;
width: 100%;
height: 100%;
z-index: 99;
mix-blend-mode: lighten;
pointer-events: none;
}
/* BUTTONS */
button {
padding: 0;
margin-top: 4px;
border: 0;
cursor: pointer;
outline: none;
width: 25px;
height: 25px;
}
#play-icon {
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
width: 25px;
height: 25px;
transform: scale(1.2);
z-index: 1;
filter: invert(1);
mix-blend-mode: difference;
background: transparent;
}
path {
stroke: #fff;
fill: #fff;
mix-blend-mode: difference;
object-fit: cover;
}
button.navigation-button-info {
margin-top: 0;
}
button.navigation-button-nwsletter {
margin-top: 0;
}
#mute-icon {
float: left;
display: none;
width: 18px;
height: 18px;
margin-top: -1px;
background: transparent;
}
/* WRAPS */
#player {
--seek-before-width: 0%;
--volume-before-width: 100%;
--buffered-width: 0%;
max-height: 80px;
height: 100%;
max-width: 608px;
width: 100%;
z-index: 999;
user-select: none;
}
#audio-player-container {
position: relative;
max-width: 600px;
height: 32px;
border: 4px solid white;
z-index: 1;
/* background color */
background-color: #000;
}
#volume-slider-container {
position: absolute;
display: flex;
top: -30px;
max-width: 608px;
width: 100%;
height: 30px;
content-align: center;
justify-content: space-between;
align-items: center;
gap: 8px;
opacity: 0;
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}
#player:hover #volume-slider-container {
opacity: 1;
}
#volume-slider {
opacity: 0;
position: relative;
z-index: 10;
transform: scaleY(5.5);
}
#volume-slider-squish {
position: relative;
}
#volume-slider-squish::after {
content: '';
position: absolute;
top: 0;
left: 0;
z-index: 0;
display: block;
width: var(--volume-before-width, 0);
height: 100%;
background-color: #fff;
}
#audio-player-container::before {
position: absolute;
content: '';
}
/* OUTPUTS + TEXT */
.time {
width: 32px;
text-align: center;
line-height: 32px;
color: #fff;
mix-blend-mode: difference;
font-weight: 700;
letter-spacing: -1px;
font-size: 14px;
font-family: 'Inter', sans-serif;
}
#duration {
position: absolute;
right: 10px;
z-index: 1;
}
#current-time {
position: absolute;
left: 10px;
z-index: 1;
}
output {
width: 18px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 12px;
float: left;
clear: left;
color: #fff;
float: left;
}
/* SLIDERS */
input[type="range"] {
position: relative;
-webkit-appearance: none;
width: 100%;
margin: 0;
padding: 0;
height: 32px;
float: left;
border-radius: 0;
z-index: 0;
cursor: default;
}
input[type="range"]::-webkit-slider-runnable-track {
width: 100%;
height: 32px;
cursor: default;
/* COLOR AFTER */
background-color: #000;
}
input[type="range"]::before {
position: absolute;
content: "";
left: 0;
width: var(--seek-before-width);
height: 32px;
/* COLOR BEFORE */
background-color: #fff;
cursor: default;
}
input[type="range"]::-webkit-slider-thumb {
opacity: 0;
cursor: default;
}
input[type="range"]:hover::-webkit-slider-thumb {
opacity: 0;
cursor: default;
}
input[type="range"]:active::-webkit-slider-thumb {
opacity: 0;
cursor: default;
}
input[type="range"]::-moz-range-track {
width: 100%;
height: 32px;
cursor: default;
background-color: black;
}
input[type="range"]::-moz-range-progress {
background-color: white;
height: 32px;
}
input[type="range"]::-moz-focus-outer {
border: 0;
cursor: default;
}
input[type="range"]::-moz-range-thumb {
opacity: 0;
cursor: default;
}
input[type="range"]:active::-moz-range-thumb {
opacity: 0;
cursor: default;
}
input[type="range"]::-ms-track {
width: 100%;
height: 32px;
cursor: default;
background: transparent;
}
input[type="range"]::-ms-fill-lower {
background-color: transparent;
cursor: default;
}
input[type="range"]::-ms-fill-upper {
background: transparent;
cursor: default;
}
input[type="range"]::-ms-thumb {
opacity: 0;
cursor: default;
}
input[type="range"]:active::-ms-thumb {
opacity: 0;
cursor: default;
}
#volume-slider {
float: left;
}
#volume-slider-squish {
width: 100%;
height: 4px;
float: left;
/* background-color: blue; */
background-color: rgba(0, 0, 0, 0.3);
}
#volume-slider::-webkit-slider-runnable-track {
background: rgba(0, 0, 0, 0.5);
float: left;
height: 4px;
}
#volume-slider::-moz-range-track {
background: rgba(0, 0, 0, 0.5);
float: left;
height: 4px;
}
#volume-slider::-ms-fill-upper {
background: rgba(0, 0, 0, 0.5);
float: left;
height: 4px;
}
#volume-slider::before {
width: var(--volume-before-width);
float: left;
height: 4px;
}
#volume-slider-squish>input[type="range"] {
height: 4px;
}
#volume-slider-squish>input[type="range"] {
height: 4px;
}
#volume-slider-squish>input[type="range"]::-webkit-slider-runnable-track {
height: 4px;
}
#volume-slider-squish>input[type="range"]::before {
height: 4px;
}
#volume-slider-squish>input[type="range"]::-webkit-slider-thumb {
height: 4px;
width: 4px;
background-color: #fff;
transform: scale(1);
opacity: 1;
}
#volume-slider-squish>input[type="range"]:hover::-webkit-slider-thumb {
height: 4px;
width: 4px;
transform: scale(1);
opacity: 1;
}
#volume-slider-squish>input[type="range"]:active::-webkit-slider-thumb {
height: 4px;
width: 4px;
transform: scale(1);
opacity: 1;
}
#volume-slider-squish>input[type="range"]::-moz-range-track {
height: 4px;
}
#volume-slider-squish>input[type="range"]::-moz-range-progress {
height: 4px;
}
#volume-slider-squish>input[type="range"]::-moz-focus-outer {
height: 4px;
}
#volume-slider-squish>input[type="range"]::-moz-range-thumb {
height: 4px;
}
#volume-slider-squish>input[type="range"]:active::-moz-range-thumb {
height: 4px;
}
#volume-slider-squish>input[type="range"]::-ms-track {
height: 4px;
}
#volume-slider-squish>input[type="range"]::-ms-fill-lower {
height: 4px;
}
#volume-slider-squish>input[type="range"]::-ms-fill-upper {
height: 4px;
}
#volume-slider-squish>input[type="range"]::-ms-thumb {
height: 4px;
}
#volume-slider-squish>input[type="range"]:active::-ms-thumb {
height: 4px;
}
And here is HTML for it:
<!-- PLAYER -->
<div id="player">
<!-- CHANGE PLAYER COLOR -->
<div id="color-switch"><img src="https://i.imgur.com/SYyiJUa.png">
<div id="volume-slider-container">
<output id="volume-output">100</output>
<div id="volume-slider-squish">
<input type="range" id="volume-slider" max="100" value="70">
</div>
<button id="mute-icon"></button>
</div>
<div id="audio-player-container">
<audio src="https://assets.codepen.io/4358584/Anitek_-_Komorebi.mp3" preload="metadata" loop></audio>
<button id="play-icon"></button>
<span id="current-time" class="time">0:00</span>
<input type="range" id="seek-slider" max="100" value="0">
<span id="duration" class="time">0:00</span>
</div>
</div>
</div>