Nested Flip cards & Apple Safari - html

Question

I am trying to make nested flip-cards for a login-system - successful as far as Edge, Chrome, Opera and Firefox goes, but Safari...
I am aware of the "hack" for Apple Safari to propper rotate cards, so I applied the '-webkit-backface-visibility: hidden;' to all the cards.
Unfortunately, Safari still does show the rotated backface of my Cards. Can anyone help?
Here is my code:CSS
/* The OUTER & INNER flip */
.flip-o-card, .flip-i-card {
background-color: transparent;
width: 320px;
/*border: 1px solid #f1f1f1;*/
perspective: 1000px;
margin:0 auto;
}
.flip-o-card {
height: 480px;
}
.flip-i-card {
height: 400px;
}
.flip-o-card-inner, .flip-i-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-o-card.hover .flip-o-card-inner, .flip-i-card.hover .flip-i-card-inner {
transform: rotateY(180deg);
}
.login-forgot, .register, .login, .forgot {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.login-forgot, .login {
background-color: #bbb;
color: black;
}
.register {
background-color: #1eff73;
color: white;
transform: rotateY(180deg);
}
.forgot {
background-color: #ff1e1e;
color: white;
transform: rotateY(180deg);
}
/* ####################################### */
.toggle-o, .toggle-i {
text-align: center;
}
.toggle-o {
padding-top: 50px;
}
.toggle-i {
padding-top: 0px;
}
the jquery:
$(document).ready(function(){
$('.toggle-o').on('click', function(){
console.log('Flip button clicked...');
$('.flip-o-card').toggleClass('hover');
if( $('div.text-center.toggle-o p').html() === "Register" ){
$('div.text-center.toggle-o p').html("Log in");
} else {
$('div.text-center.toggle-o p').html("Register");
}
});
$('.toggle-i').on('click', function(){
console.log('Switch button clicked...');
$('.flip-i-card').toggleClass('hover');
if( $('div.text-center.toggle-i p').html() === "Forgot password" ){
$('div.text-center.toggle-i p').html("Back to log in");
} else {
$('div.text-center.toggle-i p').html("Forgot password");
}
});
});
the html:
<div class="flip-o-card">
<div class="flip-o-card-inner">
<div class="login-forgot">
<div class="flip-i-card">
<div class="flip-i-card-inner">
<div class="login">
<p>login</p>
</div>
<div class="forgot">
<p>forgot</p>
</div>
</div>
</div>
<div class="text-center toggle-i">
<p>Forgot password</p>
</div>
</div>
<div class="register">
<p>register</p>
</div>
</div>
</div>
<div class="text-center toggle-o">
<p>Register</p>
</div>

Answer 1

Using some jQuery to hide the flipped main Card did the trick! (see the fiddle that I added in the comments...) However, as T J mentioned, Safari is the new IE... Grrr