card flip not working in firefox if an element is inserted to enclose the front and back elements

Question

In Case of normal flip where the container enclosing two elements front and back the flip works fine in all browsers. But if suppose an element is introduced to enclose the front and back elements then flip is not working in firefox only.

function x() {
    document.getElementById('flipper').style.transform = "rotateY(180deg)";
}

function Y() {
    document.getElementById('flipper').style.transform = "";
}

.flip-container {
    margin: 20px 26px 32px 26px; /* customized rule */
}

    .flip-container, .front, .back {
        width: 240px; /* customized rule */
        height: 240px; /* customized rule */
    }

.flipper {
    transition: 0.6s;
    transform: perspective(1000px);
    transform-style: preserve-3d;
    position: relative;
}

.front, .back {
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}


.back {
    background-color: #9CF;
    transform: rotateY(180deg);
}

<div class="flip-container">
    <div class="flipper" id="flipper">
        <div>
            <div class="front" onclick="x()">
                <div class="party_image">
                    <img alt="Front Image alternative text" />
                </div>
            </div>
            <div class="back" onclick="Y()">
                <div class="party_text_container">
                    <div class="party_text">Back Blah blah
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>