CSS flip-animation not working in Safari

Question

Based on this excellent blogpost I implemented a flip-animation on a page of a web-application I am working on. At first I used the CSS-classes as presented in the top of t

Answer 1

You need to prefix backface-visibility for Safari according to Can I use, even for the newest version 9.1 at the time of writing.

-webkit-backface-visibility: hidden;
backface-visibility: hidden;

Updated Example

document.getElementById("myBtn").addEventListener("click", function() {
  document.querySelector("#flipFrame").classList.toggle("hover")
});

/* entire container, keeps perspective */

.flip-container {
  -webkit-perspective: 1000;
  perspective: 1000;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

/*  UPDATED! flip the pane when hovered */

.flip-container.hover .back {
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
}

.flip-container.hover .front {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.flip-container,
.front,
.back {
  width: 320px;
  height: 480px;
}

/* flip speed goes here */

.flipper {
  -webkit-transition: 0.6s;
  transition: 0.6s;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  position: relative;
}

/* hide back of pane during swap */

.front,
.back {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: 0.6s;
  transition: 0.6s;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  position: absolute;
  top: 0;
  left: 0;
}

/*  UPDATED! front pane, placed above back */

.front {
  z-index: 2;
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
}

/* back, initially hidden pane */

.back {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

<div class="flip-container" id="flipFrame">
  <div class="flipper">
    <div class="front">
      FRONT CONTENT
      <br>
      <button id="myBtn" onclick="flipFrame()">
        Start <b>here</b>
      </button>
    </div>
    <div class="back">
      BACK CONTENT
    </div>
  </div>
</div>