chrome 中的第一个转换隐藏卡背

Question

我正在开发一种在正面和背面显示各种内容的通用卡片。单击一下卡片翻转 180 度。

在 Chrome 中，当我的背面内容包含绝对或相对定位时，卡片背面仅在过渡结束时（或附近）可见。

在 Safari 和 Firefox 中我没有看到同样的问题。

这个问题可以在这个笔中看到 https://codepen.io/rumbletumble/pen/GRgNeLg

我试过了

使用动画而不是过渡，但存在同样的问题
在卡背上添加backface-visibility: visible，但是这样会导致卡上闪烁

这可能只是 Chrome 中的错误吗？

Answer 1

我已经更改了下面的 class，它现在似乎在所有浏览器中都可以正常工作。（无法测试 IE）

/* hide back of pane during swap */
.front, .back {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;

  transform: rotateX(0deg);
  transform-style: preserve-3d;

  position: absolute;
  top: 0;
  left: 0;
  color: cornSilk;
  text-align: center;
  font: 3em/240px 'Helvetica Neue', Helvetica, sans-serif;
  box-shadow: -5px 5px 5px #aaa;
}

chrome 中的第一个转换隐藏卡背

Card back hidden on first transition in chrome

css

google-chrome

css-position

css-transitions