Css mac OS X上的chrome不支持翻转动画

我有一个仪表板，我使用的是CSS3翻转动画，翻转动画在windows中运行良好，但在Mac OS X上的chrome上，当我在该分区上悬停时翻转动画会闪烁。请为我提供一些修复

谢谢

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;
}

---

我在OSX上使用Chrome57时也遇到了同样的问题。翻转卡片时，背面会短暂显示，然后消失为白色

---

我的解决方案是设置

背景色：白色在正面和背面，而不是翻转容器。无法100%确定背景色为何会出现问题，但它现在可以正确翻转，不会闪烁！：）
 你能制作一个代码笔、提琴或堆栈溢出代码段吗？有同样的问题。希望得到答案。感谢您提供精彩的解决方案。这个问题几个月前就解决了。尽管我希望你能像我以前做的那样给出准确的答案。