Why is '-webkit-background-clip' not working on mobile, but working fine on desktop (even if browser width is changed)?

If you open the Codepen on a desktop it works fine, even when you change the browser width. If you open it on mobile, the text disappears. No clue what's happening here, thanks in advance for help!

Codepen for reference: https://codepen.io/hanwhite/pen/JjpWZqG

    <div class="enter_button_docked">
        <div class="enter_button_bg">
            <div class="enter_button_bg2">
                <button class="enter_button" >This is a button</button>
            </div>
        </div>
    </div>

    <style>

    .enter_button_docked {
        display: block;
        position: fixed;
        width: 100%;
        bottom: 50px;
        left: 0;
        display: flex;
        height: 90px;
        justify-content: center;
        align-items: center;
        z-index: 10;
    }

    .enter_button_bg {
        width: 90%;
        padding: 3px;
        border-radius: 8px;
        background: linear-gradient(to bottom, #e82ea9, #0afff0);
    }

    .enter_button_bg2 {
        background-color: white;
        border-radius: 8px;
    }

    .enter_button {
        position: relative;
        text-transform: uppercase;
        font-weight: 900;
        font-size: 30px;
        width: 100%;
        margin: 8px 0px;
        letter-spacing: 2px;
        border: none;
        background: -webkit-linear-gradient(#e82ea9, #0afff0);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    </style>