flip animation is not working in chrome on mac OS X - css

Question

I have a dashboard in that I am using CSS3 flip animations,the flip animations are working fine in windows but when comes to chrome on Mac OS X the flip animation is flickering when I am hovering on that DIV.Please provide me some fix.
Thanks.
CSS:
Here the problem is only with 'back face' when I am hovering on that div it is flickering.
#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

I experienced the same issue using Chrome 57 on OSX. Upon flipping the card, the back would show briefly and then disappear to white.
My solution was to set background-color: white; on the front and back instead of the flip container. Not 100% sure why the background color is an issue but it flips correctly now with no flicker! :)