Flip-animação CSS não funciona no Safari

Question

Jan 17, 2016, 03:10 AM

Flip-animação CSS não funciona no Safari

Baseado emeste excelente blogpost Eu implementei uma animação flip em uma página de um aplicativo da Web em que estou trabalhando. No começo, eu usei as classes CSS conforme apresentadas na parte superior do post do blog, mas infelizmente isso não funciona no IE10, então comecei a usar a classe CSS proposta como uma solução para fazê-lo funcionar no IE10 apresentado no final de o post do blog.

Simplifiquei o exemplo tremendamente para este post, mas meu código se parece com isso

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Welcome!</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link href="flipper.css" rel="stylesheet">
    <script src="js/jquery-1.11.2.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="flip-container" id="flipFrame">
    <div class="flipper">
        <div class="front">
            FRONT CONTENT
            <br>
            <button onclick="flipFrame()">
                Start <b>here</b>
            </button>
        </div>
        <div class="back">
            BACK CONTENT
        </div>
    </div>
</div>
</body>
 <script>
function flipFrame(){
    document.querySelector("#flipFrame").classList.toggle("hover")
}
</script>

CSS:

/* entire container, keeps perspective */
.flip-container {
    perspective: 1000;
    transform-style: preserve-3d;
}
/*  UPDATED! flip the pane when hovered */
.flip-container.hover .back {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);    
}
.flip-container.hover .front {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg);       
}

.flip-container, .front, .back {
    width: 320px;
    height: 480px;
}

/* flip speed goes here */
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
}

/* hide back of pane during swap */
.front, .back {
    backface-visibility: hidden;
    transition: 0.6s;
    transform-style: preserve-3d;
    position: absolute;
    top: 0;
    left: 0;
}

/*  UPDATED! front pane, placed above back */
.front {
    z-index: 2;
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);    
}

/* back, initially hidden pane */
.back {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg);  
}

Esse código funciona perfeitamente no Chrome e no Edge. No IE10, ele funciona, mas não há flip-animation. Apenas alterna o div dianteiro com o div traseiro sem virar, mas ainda está tudo bem. No Safari (no Mac OS X e iPhone), no entanto, não está funcionando corretamente. Ambos os divs estão constantemente visíveis um ao lado do outro (com o back-div sendo espelhado)

Alguém sabe como posso fazer com que essa funcionalidade funcione no IE10 e no Safari no Mac OS X e iPhone?

O trecho de código pode ser encontrado e executado aqui:https://jsfiddle.net/jrwx3L2e/1/