I'm trying to flip multiple div elements at different times in Reactjs by toggling the classes assigned to them.

It works as expected in Opera, Firefox, and Chrome, but not Safari. In Safari, when a single element is flipping, all the other flipped elements disappear. The other non-flipped elements are unaffected though. I'm wondering if this is fixable in Safari so it behaves like the other browsers?

Here's a jsfiddle that will work in all browsers but Safari.

Here's the relevant jsx. 'flipped' is an object with multiple booleans to keep track of which items are flipped and which are not.

  <div className="item">
    <div className={"bg-card" + (flipped[i] ? ' bg-card-flipped' : '')}>
      <div className="bg-image bg-image-front">Front {i}</div>
      <div className="bg-image bg-image-back">Back {i}</div>
    </div>
  </div>

Here's the relevant css:

.item {
  position: relative;
  background-color: black;
  width: 100px;
  height: 100px;
  margin-right: 20px;
}

.bg-card {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 0.5s ease;
}
.bg-card-flipped {
  transform: rotateY(180deg);
}
.bg-image {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  border-style: solid;
  font-size: 1.4em;
  color: white;
  font-weight: bold;
}
.bg-image-front {
  backface-visibility: hidden;
  background-color: rgb(117, 211, 255);
}
.bg-image-back {
  backface-visibility: hidden;
  transform: rotateY(180deg);
  background-color: rgb(85, 85, 85);
}

Any help would be greatly appreciated!