Question

我有一张CSS翻转卡，在这里设置为jsFiddle：

这在FireFox，MS Edge甚至IE中都有效，但在Chrome（以及Opera等基于Chrome的浏览器）中存在问题。

在Chrome中，翻转卡正面的显示仍然显示有问题，直到用户将鼠标移出卡片为止，并且有时在将卡片翻回正面后不会显示

我应该提一下，不透明度的变化是在翻转时被添加为Chrome的上一个问题的解决方案，其中翻转卡前面的Canvas元素不遵守“背面可见性：隐藏”设置。 / p>

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

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

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/

CSS Flip Card - Chrome中的错误

1 个答案: