backface visibility not working in safari

Question

I am trying to uss cssflip animation in my code in which the element rotates when hovered upon. I have used transition and backface-visibilty property. It is working fine on chrome but it is not working properly on safari. I have used webkit prefix as well for safari browser.

`.card-container{

margin-top: 9%;
perspective: 900px;
-webkit-perspective: 900px;
z-index: 1;

}

.card{

float: left;
width: 78.5%;
height: 35%;
margin-top: 25%;
border: 1px solid #A08C87;
transition: all 0.6s ease;
-webkit-transition: all 0.6s ease;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;   

}

#front #back{

color: white;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;

}

front{

backface-visibility: hidden;
-webkit-backface-visibility: hidden;

}

back{

display: flex;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
font-size: 20px;

} .card-container:hover .card{

transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);

}

back{

transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);

}`

Solution

I think the issue here is with the

backface-visibility: hidden;

It's not being supported in ios and in safari.

In your code just replace the code with

 #front #back {
    color: white;
    -webkit-perspective: 0;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translate3d(0,0,0);
    visibility:visible;
    backface-visibility: hidden;
}

I hope this will help you.

Comments

[NiRUS]

this works. Tested on Safari Version 12.1.1 (14607.2.6.1.1)

[j.j.]

FWIW, years later, backface-visibility is not unprefixed in Safari for no reason. WebKit bug is here: bugs.webkit.org/show_bug.cgi?id=170983