CSS FlipCard в Safari (3D-преобразования)

Простое приложение FlipCard. Приложение отлично работает в Chrome, но не в Safari. В сафари при клике виден текст на обратной стороне карты, он мерцает, а потом пропадает.

Идея кода пришла по этой ссылке: w3schools/howto/css-flip-card

HTML:

<div class='flip-card'>
<div class='flip-card-inner'>
<div class='flip-card-front'><p>1</p></div> 
<div class='flip-card-back'><p>2</p></div> 
</div> 
</div> 

CSS:

.flip-card {
perspective:1000px;
-webkit-perspective:1000px}

.flip-card-inner {
position:relative; 
transition:transform 0.8s;
-webkit-transition:-webkit-transform 0.8s;
transform-style:preserve-3d;
-webkit-transform-style:preserve-3d}

.flip-card-front, .flip-card-back {
position:absolute;
backface-visibility:hidden;
-webkit-backface-visibility:hidden;}

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

JS:

$('#flash-card-game').on('click',function(){FlipToBack()});

function FlipToBack(){
$('#flash-card-game').css("transform","rotateY(180deg)");
$('#flash-card-game').css("-webkit-transform","rotateY(180deg)");
setTimeout(FlipToFront,1000);}

function FlipToFront(){
$('#flash-card-game').css("transform","rotateY(0deg)");
$('#flash-card-game').css("-webkit-transform","rotateY(0deg)");} 

Любая помощь будет оценена по достоинству.