旋转面板--CSS过渡突破在Safari和Chrome - 供应商前缀不完全有效

Question

我正在构建一个简单的旋转面板，使用css3转换以及一个超级简单的jQuery函数来切换旋转面板的类。我已经尽了最大的努力设置了供应商前缀（通过手动和使用自动化前缀服务），使Safari和Firefox更加快乐，但是，事实并非如此。
在Safari中，文字和按钮在面板旋转后消失。
在Chrome中，旋转面板后内容会延迟显示。

更新：此处的解决方案Backface-Visibility Not Working Properly in Firefox (Works in Safari)虽然相似，但不能解决问题，也无法找到其他任何答案。

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

我所有的文件都可以在这个回购/分支中找到：https://github.com/NickTerrafranca/Rotating-Panel/tree/cross_browser

提前很多感谢！

Answer 1

做一些研究我发现这个answer从一个不同的SO question。他们说的是这样做的：

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

看看是否适合你。

UPDATE：问题实际上是与background。有#card的背景掩盖了后面。因此，请添加此

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

fiddle在Chrome，Safari和Firefox中进行了测试。