Safari CSS issue (Z-index? transform?) - css

Question

I've been struggling with this for a week or so, but don't feel close to fixing it. So I'm coming to Stack Overflow for the first time, hello!
I built a nifty little card amount selector that allows users to select a card in a visual way.
If you want to see it in action, please look at my CodePen!
It works fine in Chrome, but when I open it in Safari, the animation of the shadow and the z-index seems to take a moment to catch up.
I've tried adding the below to CSS, to no avail.
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
I'd appreciate anyone's help!
ReactJS
const { useState } = React;
function CardAmount(props) {
const cardAmounts = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const [cardAmount, setCardAmount] = useState(1);
function cardClick(e) {
const amount = Number.parseInt(e.target.id) + 1;
if (amount !== cardAmount) {
setCardAmount(amount);
}
}
function cardvCards(num) {
if (num === 0) {
return <p>card</p>;
} else {
return <p>cards</p>;
}
}
function animateCard(cardNumber) {
if (cardNumber < cardAmount) {
return "FrontFacing";
} else {
return "BackFacing";
}
}
//makeCards
function makeCards() {
return cardAmounts.map((d, i) => {
return (
<div className={animateCard(i)} key={"card_" + i}>
<div className="cardFront" id={i} onMouseEnter={cardClick}>
<div className="borderbox">
<h1>{d}</h1>
{cardvCards(i)}
</div>
</div>
<div className="cardBack" id={i} onMouseEnter={cardClick}></div>
</div>
);
});
}
return (
<div className="CardChoice">
<div className="cardAmountDisplay">{makeCards()}</div>
</div>
);
}
ReactDOM.render(<CardAmount />, document.getElementById("app"));
CSS
#app {
background-color: rgb(85, 26, 122);
width: 100vw;
height: 100vh;
}
h1 {
text-align: center;
}
p {
text-align: center;
}
.CardChoice {
display: flex;
align-items: center;
justify-content: center;
height: 180px;
}
.cardAmountDisplay {
display: flex;
position: relative;
}
.FrontFacing,
.BackFacing {
position: absolute;
background-color: white;
border: 1px solid #d4af37;
border-radius: 10px;
margin: 5px;
height: 165px;
width: 115px;
transition: 750ms;
-webkit-transition: 750ms;
-moz-transition: 750ms;
-o-transition: 750ms;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
box-shadow: -8px 2px 8px rgba(0, 0, 0, 0.5);
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
}
.BackFacing {
transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
}
.cardFront,
.cardBack {
position: absolute;
width: 100%;
height: 100%;
border-radius: 10px;
background-color: white;
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
}
.cardFront {
display: flex;
justify-content: center;
align-items: center;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
}
.borderbox {
background-color: white;
width: 95%;
height: 95%;
border: 1px solid #d4af37;
border-radius: 10px;
margin-left: 1px;
pointer-events: none;
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
}
.cardFront h1 {
font-size: 80px;
color: #d4af37;
text-shadow: 1px 0px rgb(0, 0, 0), -1px 0px rgb(0, 0, 0), 0px 1px rgb(0, 0, 0),
0px -1px rgb(0, 0, 0);
margin-top: 15px;
margin-bottom: 0px;
pointer-events: none;
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
}
.cardFront p {
font-size: 16px;
font-weight: 600;
color: #d4af37;
text-transform: uppercase;
pointer-events: none;
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
}
.cardBack {
transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
}
.FrontFacing:nth-child(1) {
margin-left: -280px;
z-index: 1;
}
.FrontFacing:nth-child(2) {
margin-left: -240px;
z-index: 2;
}
.FrontFacing:nth-child(3) {
margin-left: -200px;
z-index: 3;
}
.FrontFacing:nth-child(4) {
margin-left: -160px;
z-index: 4;
}
.FrontFacing:nth-child(5) {
margin-left: -120px;
z-index: 5;
}
.FrontFacing:nth-child(6) {
margin-left: -80px;
z-index: 6;
}
.FrontFacing:nth-child(7) {
margin-left: -40px;
z-index: 7;
}
.FrontFacing:nth-child(8) {
margin-left: 0px;
z-index: 8;
}
.FrontFacing:nth-child(9) {
margin-left: 40px;
z-index: 9;
}
.FrontFacing:nth-child(10) {
margin-left: 80px;
z-index: 10;
}
.BackFacing:nth-child(2) {
margin-left: -140px;
z-index: 9;
}
.BackFacing:nth-child(3) {
margin-left: -100px;
z-index: 8;
}
.BackFacing:nth-child(4) {
margin-left: -60px;
z-index: 7;
}
.BackFacing:nth-child(5) {
margin-left: -20px;
z-index: 6;
}
.BackFacing:nth-child(6) {
margin-left: 20px;
z-index: 5;
}
.BackFacing:nth-child(7) {
margin-left: 60px;
z-index: 4;
}
.BackFacing:nth-child(8) {
margin-left: 100px;
z-index: 3;
}
.BackFacing:nth-child(9) {
margin-left: 140px;
z-index: 2;
}
.BackFacing:nth-child(10) {
margin-left: 180px;
z-index: 1;
}