Have a web app which has a button that is working fine in Android but not showing at all across multiple iOS devices on Safari or Chrome.
For readability I've excluded much of the code except the button code, in a hope it's something simple with this. Any ideas?

HTML:

<style>
.button {
            border: none;
            color: white;
            padding: 10px 10px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            position: fixed;
            
            margin: 0 auto;
            
            cursor: pointer;
            
            
        }

        .button1 {background-color: darkblue;}
</style>

<button class="button button1" id="unmuteButton">UNMUTE</button>

<canvas id="camerafeed"></canvas>

And the JS:

const btn = document.getElementById("unmuteButton");

btn.addEventListener("click", ()=>{

    if(btn.innerText === "UNMUTE"){
        btn.innerText = "MUTE"
        depthkit.video.muted = false
    }else{
        btn.innerText= "UNMUTE";
        depthkit.video.muted = 'muted'
    }
})