旋转面板 - CSS 转换在 Safari 和 Chrome 中中断 - 供应商前缀不完全有效

Question

我正在构建一个简单的旋转面板，使用 css3 转换以及一个超级简单的 jQuery 函数来切换旋转面板的 class。我已尽我所能设置供应商前缀（手动和使用自动前缀服务）以使 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;
}

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

非常感谢！

Answer 1

~~我在做一些研究后发现了这个 answer from a different SO question。他们说的是这样做：~~

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

~~看看是否适合你。~~

更新：问题实际上出在 background。在 #card 上有背景掩盖了后面。所以添加这个

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

fiddle 在 Chrome、Safari 和 Firefox 中测试。

旋转面板 - CSS 转换在 Safari 和 Chrome 中中断 - 供应商前缀不完全有效

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

css

jquery

vendor-prefix