backface-visibility not working in Firefox (works in Chrome) - html

Question

backface-visibility not working in Firefox (works in Chrome)
I'm trying to make a form for a credit card that flips over to show the cvc number.
But in Firefox the backside doesn't show at all and the front side shows on both sides, but it works properly in Chrome.
I've tried adding prefixes but it still doesn't work.
Thanks for any help you can give😊
CodePen
HTML:
<div id="on-card-content">
<div id="on-card">
<div id="on-card-inner">
<div id="on-card-front">
<div id="icon-box">
</div>
<div id="number-box">
<label for="on-card-number">Card Number</label>
<input type="text" name="on-card-number" id="on-card-number" placeholder="•••• •••• •••• ••••">
</div>
<div id="name-box">
<label for="on-card-name">Cardholder Name</label>
<input type="text" name="on-card-name" id="on-card-name" placeholder="Your Name">
</div>
<div id="exp-box">
<label for="on-card-exp">Expiry Date</label>
<input type="text" name="on-card-exp" id="on-card-exp" placeholder="MM/YY">
</div>
</div>
<div id="on-card-back">
<div id="swipe-bar"></div>
<input type="text" name="on-card-cvc" id="on-card-cvc" placeholder="123">
<label for="on-card-cvc">CVC</label>
<p id="card-agree">Use of this card is subject to the credit card agreement.</p>
</div>
</div>
</div>
<button type="button" id="card-button"></button>
</div>
CSS:
#on-card-content {
width: fit-content;
width: -moz-fit-content;
}
#on-card {
font-family: 'Source Sans Pro', sans-serif;
width: 320px;
height: 190px;
background: linear-gradient(410deg, #808080 60%, #000000 60%);
margin: 0 auto;
border-radius: 15px;
color: white;
box-shadow: 0 0 15px #0707074d;
transition: transform 0.8s;
transform-style: preserve-3d;
}
#on-card.is-active {
transform: rotateY(-180deg);
box-shadow: 0 0 15px #0707074d;
}
#card-button{
border-radius: 15px;
text-align: center;
margin: 5% 40%;
background: #1a1f71;
color: #ffffff;
border: none;
padding: 10px 10px;
}
#card-button.is-active {
background: #e60404;
}
#card-button::after {
content: 'Next';
}
#card-button.is-active::after {
content: 'Back';
}
#on-card-back {
transform: rotateY(-180deg);
}
#swipe-bar {
background: #000000;
height: 20%;
width: inherit;
margin-top: 5%;
}
#swipe-bar {
background: #000000;
height: 20%;
width: inherit;
margin-top: 5%;
}
#on-card-inner {
background-color: #b3a4a4b3;
border-radius: 15px;
height: inherit;
transition: all 1s ease;
}
#on-card-number {
background: transparent;
border: none;
color: white;
}
#on-card-name {
background: transparent;
border: none;
color: white;
}
#on-card-exp {
background: transparent;
border: none;
color: white;
}
#on-card-front{
transform:rotateY(0deg);
}
#on-card-front,
#on-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
#on-card-name {
text-transform: uppercase;
}
#on-card-number {
font-size: 145%;
width: 100%;
}
#icon-box {
height: 5rem;
}
#number-box {
margin-left: 5%;
margin-bottom: 3%;
}
#name-box {
width: 50%;
float: left;
margin-left: 5%;
}
#on-card-name {
width: 100%;
}
#exp-box {
width: 40%;
float: right;
margin-right: 3%;
}
#on-card-exp {
width: 100%;
}
#on-card-cvc {
text-align: right;
margin-top: 5%;
height: 15%;
}
#card-agree {
font-size: 70%;
margin: 5%;
}
JS:
const cardButton = document.getElementById('card-button')
const card = document.getElementById("on-card");
cardButton.addEventListener('click', () => {
card.classList.toggle('is-active')
cardButton.classList.toggle('is-active')
})
The Solution from the "duplicate" Question doesn't solve the issue

Answer 1

I need to remove <div id="on-card-inner"> and rework the colour transition I have on that to the front and back.
Firefox seems to not work when child elements that have child elements that have backface-visibility set to hidden.