Flip Animation在Mac OS X的Chrome中不起作用

Question

我有一个仪表板，因为我正在使用CSS3翻转动画，Flip动画在Windows中正常工作，但是当Mac OS X上的Chrome时，Flip Animation在我徘徊时会闪烁，在那个div。请给我一些解决方案。

谢谢。

CSS：

这里的问题只有在我徘徊在那个div上时的"背面"。

#f1_container {
  position: relative;
  width: 100%;
  z-index: 1;
  margin-bottom: 20px;
  display: inline-block;
}
#f1_container {
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  -o-perspective: 1000;
  perspective: 1000;
}
#f1_card {
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: 1.5s ease-in-out;
  -moz-transition: 1.5s ease-in-out;
  -ms-transition: 1.5s ease-in-out;
  -o-transition: 1.5s ease-in-out;
  transition: 1.5s ease-in-out;
  background-color: white;
}
#f1_container:hover #f1_card {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.face {
  position: relative;
  width: 100%;
  height: 100%;
  -moz-transform-style: preserve-3d;
  -moz-backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  top: 0;
}
.face.back {
  display: block;
  -webkit-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  -o-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
  box-sizing: border-box;
  color: white;
  text-align: center;
  position: absolute;
  -moz-transform-style: preserve-3d;
  -moz-backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -moz-transform: rotateY(-180deg);
  -webkit-transform: rotateY(-180deg);
}
.no-flick{
  -webkit-transform:translate3d(0,0,0);
  -moz-transform:translate3d(0,0,0);
  -ms-transform:translate3d(0,0,0);
  -o-transform:translate3d(0,0,0);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}

Answer 1

我在OSX上使用Chrome 57经历了同一问题。翻转卡后，背部将短暂显示，然后消失至白色。

我的解决方案是将background-color: white;设置在前后，而不是翻转容器。不是100％确定为什么背景颜色是问题的，但是现在没有闪烁的情况就正确翻转了！：）