Card Flip css/js effect does not work in safari

Question

I have a simple code I developed, from a card flip effect, example below.

Works on google quiet, but I found that in safari has a bug when the card turns, I searched on, I found some prefixes for safari but I can not find a solution, missing some prefix support for safari?

The bug in safari is that when the card flips with the click, the background does not appear, just the front.

let card  = document.getElementById("card")

let frente = true

card.addEventListener("click", (event) => {
  if (frente == true) {
    card.style.transform = "rotateY(180deg)"
    frente = false
  }
  else {
    card.style.transform = "rotateY(0deg)"
    frente = true
  }
  event.stopPropagation()
})

body, .content, html {height: 100%}
* {margin: 0; padding: 0; box-sizing: border-box; font-family: sans-serif;}

.content {
  align-items: center;
  background-image: linear-gradient(to top, #dfe9f3 0%, white 100%);
  display: flex;
  justify-content: center;
  perspective: 600;
}

.card {
  background-color: #fff;
  box-shadow: 0px 2px 10px #444;
  height: 480px;
  position: relative;
  transition: all 0.5s ease-in-out;
  transform-style: preserve-3d;
  width: 320px;
}

.card .side {
  backface-visibility: hidden;
  height: 100%;
  position: absolute;
  overflow: hidden;
  cursor: pointer;
}

.card .back {
  background-color: #fff;
  backface-visibility: hidden;
  height: 100%;
  position: relative;
  transform: rotateY(180deg);
  width: 100%;
  z-index: 102;
}

<div class="content">
  <div id="card" class="card">
    <div class="side">
      side
    </div> <!-- .side -->
    <div class="back">
      back
    </div> <!-- .back -->
  </div> <!-- .card -->
</div>

Obs: error happens only in safari.

BS: I have this code in codepen if it helps https://codepen.io/lennon/pen/qMPqGX