The idea I want is for the parent to have the button offset so that the card is flipped when it is clicked. I made. "Flip card" Chrome still seems to be working on Safari (Mobile-iOS) a "malfunction" Where the button meets the animation. "Disconnect" For a moment the animation doesn’t behave the way I want it to (works as it does on Chrome). I have added "-Webcut-" The former of the CSS rules that made the animation work to some extent. Anything I’ve lost?

CSS:

<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body,
    html {
        height: 100%;
    }

    .flipping-frame-container {
        position: relative;
        margin: auto;
        margin-bottom: 15px;
        width: 300px;
        height: 300px;
        background-color: pink;
        border: orange solid 2px;
    }

    .flipper {
        width: 60px;
        height: 60px;
        background-color: blue;
        border-radius: 50%;
        position: absolute;
        bottom: -30px;
        right: -30px;
        border: orange solid 2px;
        z-index: 4;
    }

    .flip-container {
        display: inline-block;
        width: 100%;
        height: 100%;
        perspective: 1000;
        -webkit-perspective: 1000;
        transform-style: preserve-3d;
        -webkit-transform-style: preserve-3d;
        transition: 0.6s;
        -webkit-transition-delay: 60ms;
        position: relative;
    }



    .is-flipped .front {
        transform: rotateY(180deg);
        --webkit-transform: rotateY(180deg);
        backface-visibility: hidden;
        --webkit-backface-visibility: hidden;
    }

    .is-flipped .back {
        transform: rotateY(0deg);
        --webkit-transform: rotateY(0deg);
    }

    .front,
    .back {
        width: 100%;
        height: 100%;
        background-color: white;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transition: 0.6s;
        transition: 0.6s;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        position: absolute;
        top: 0;
        left: 0;
    }

    .front {
        z-index: 2;
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    .back {
        -webkit-transform: rotateY(-180deg);
        transform: rotateY(-180deg);
    }
</style>

JS:

 window.onload = function () {
        FlipperBtns = document.getElementsByClassName('flipper');
        Array.from(FlipperBtns).forEach(function (element) {
            element.addEventListener('click', function () {
                element.parentNode.getElementsByClassName('flip-container')[0].classList.toggle('is-flipped');
            }, false);
        });
    }

HTML:

 <div class="flipping-frame-container">
    <div class="flipper"></div>
    <div class="flip-container">
        <div class="front">Front</div>
        <div class="back">Back</div>
    </div>
</div>