Rotating Panel - CSS transitions breaking in Safari and Chrome - Vender prefix not entirely effective

Question

I am building a simple rotating panel using css3 transitions along with a super simple jQuery function to toggle the class that rotates the panel. I have done the best I can setting up the vender prefixes (both by hand and using automated prefix services) to make Safari and Firefox happy, but alas they are not.
In Safari the text and button disappear once the panel is rotated.
In Chrome the content appears with a delay once the panel is rotated.

Update: The solution here Backface-Visibility Not Working Properly in Firefox (Works in Safari) while similar, does not resolve the problem, nor does any other answer that I have been able to find.

body {
  font-family: sans-serif;
  padding-top: 30px;
  background-color: #fff;
}

#card {
  background-color: #f9f9f9;
  width: 100%;
  height: 100%;
  -webkit-transform: translateZ( 0px );
          transform: translateZ( 0px );
  -webkit-transition: -webkit-transform .7s, margin .4s;
          transition: transform .7s, margin .4s;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  position: absolute;
  border: 1px solid black;
  border-radius: 6px;
}

#card.flipped {
  -webkit-transform: rotateY( 180deg );
          transform: rotateY( 180deg );
}

#card figure {
  margin: 0;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

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

.container {
  -webkit-perspective: 2000px;
          perspective: 2000px;
  width: 320px;
  height:300px;
  position: relative;
  margin: 0 auto;
  z-index: 100;
}

figure > div {
  padding: 12px;
}

.link {
  background: #dfdfdf;
  color: #006BA5;
  cursor: pointer;
  outline: none;
}

.link:hover {
  border: none;
  background: #006BA5;
  color: #fff;
  cursor: pointer;
}

button {
  display: block;
  margin-bottom: 20px;
  padding: 10px;
  min-width: 100px;
  border-radius: 3px;
  border: 1px solid black;
}

All of my files can be found in this repo/branch: https://github.com/NickTerrafranca/Rotating-Panel/tree/cross_browser

Much thanks in advance!

Answer 1

Doing some research I found this answer from a different SO question. What they said was to do this:

#card figure {
  transform: rotateX(0deg);
  -webkit-transform: rotateX(0deg);
}

See if that works for you.

UPDATE: The problem is actually with the background. Having the background on #card covers up the back. So add this

//remove these styles from #card
#card figure { 
  background-color: #f9f9f9;
  border: 1px solid black;
  border-radius: 6px;
} 

fiddle tested in Chrome, Safari, and Firefox.