CSS 翻转卡 - Chrome 中的错误

Question

我有一个 CSS Flip Card，这里已经设置为 jsFiddle：

https://jsfiddle.net/kwudsgfw/

这在 FireFox、MS Edge 甚至 IE 中都能正常工作，但在 Chrome（以及基于 chrome 的浏览器，如 Opera）中存在问题。

在 Chrome 中，翻转卡片的正面显示似乎存在问题，直到用户将鼠标移出卡片，并且偶尔将卡片翻转到正面后才会显示.

我应该提到，翻转时的不透明度更改是作为 Chrome 先前问题的解决方案添加的，其中翻转卡正面的 Canvas 元素不遵守“背面可见性：隐藏”设置。

我在这里做错了什么，或者如果没有，有人知道解决方法吗？

为了完整起见，小提琴中的代码如下：

HTML

<div class="widget " style="height: 300px;">
  <div class="flipper">
    <div class="front anim">
      <div style="width: 90%; margin: auto; position:relative;">
        <div style="text-align: center; width: 100%;">
          <h1>Front</h1>
          <p>
            Lorem Ipsum and all that jaz
          </p>
        </div>
      </div>
    </div>
    <div class="back anim">
      <div style="height: 299px; width: 100%; margin: auto;">
        <div style="text-align: center; width: 100%;">
          <h1>Back</h1>
        </div>
        <table>
          <tbody>
            <tr>
              <th>Value 1</th>
              <td>798</td>
            </tr>
            <tr>
              <th>Value 2</th>
              <td>663</td>
            </tr>
            <tr>
              <th>Value 3</th>
              <td>493</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

CSS

.flipper {
  position: relative;
}

.anim {
  width: 100%;
  height: 100%;
  transition: all .5s;
  backface-visibility: hidden;
  position: absolute;
  top: 0px;
  left: 0px;
}

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

.flipper-click .front {
  opacity: 0;
  transform: rotateY(-180deg);
}

.flipper-click .back {
  z-index: 2;
  transform: rotateY(0deg);
}

.widget {
  width: 300px;
  height: 0px;
  overflow: hidden;
  border: 1px solid white;
  border-radius: 5px;
  padding: 3px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2px;
  float: none;
  color: #000;
  background-color: #aaa;
}

.widget:hover {
  background-color: #999;
}

JavaScript

$(".widget").click(function () {
  var $flipper = $(this).find(".flipper");
  $flipper.toggleClass("flipper-click");
});

Answer 1

在父母上也应用backface-visibility:hidden：

https://jsfiddle.net/kwudsgfw/3/