Safari CSS проблема (Z-индекс? Преобразовать?)

Question

Я борюсь с этим около недели, но не чувствую себя близким к тому, чтобы это исправить. Итак, я впервые прихожу к Stack Overflow, привет!

Я создал изящный маленький селектор суммы карты, который позволяет пользователям выбирать карту визуально. Если вы хотите увидеть его в действии, , пожалуйста, посмотрите мой CodePen!

Он отлично работает в Chrome, но когда я открываю его в Safari, анимация тени и z-index, кажется, нужно время, чтобы наверстать упущенное.

Я пробовал добавить ниже к CSS, но безрезультатно.

transform: translate3d(0, 0, 0);

-webkit-transform: translate3d(0, 0, 0);

Буду признателен за любую помощь!

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;
}