CSS Card Flip Does Not Work On Apple Devices - html

Question

I have a website where users can make flash cards and use them. Iv'e tested the cards on all devices and web browsers and apple devices seem to give me problems. The animation works and allows the card to flip, but the content on the back of the card disappears. I won't include it because it's long, but I also have a JS function that adds "flipped" to the class "gallery-cell". You will see this in my CSS.
.gallery-cell.card {
position: relative;
-webkit-transition: 0.5s;
-moz-transition: 0.6s;
transition: transform .5s;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-o-perspective:1000;
-ms-perspective: 1000;
perspective: 1000;
-ms-transform: perspective(1000px);
-moz-transform: perspective(1000px);
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
word-break: break-word;
}
.card__face {
position: absolute;
height: 100%;
width: 100%;
padding: 25px;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
display: flex;
justify-content: center;
text-align: center;
cursor: pointer;
}
.card__face--back {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY( 180deg );
}
.card__face--front {
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: inherit;
-moz-perspective: inherit;
-o-perspective: inherit;
-ms-perspective: inherit;
perspective: inherit;
z-index: 2;
background-color: #fff;
}
.flipped {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.card_contents {
overflow-y: auto;
margin: 0;
display: flex;
}
<div class='gallery-cell card flippable'>
<div class='card__face card__face--front'>
<div class='card_contents'>
<h3>
$question
</h3>
</div>
</div>
<div class='card__face card__face--back'>
<div class='card_contents'>
<h3>
$answer
</h3>
</div>
</div>
</div>

Answer 1

The reason why I reworked the CSS and HTML is b/c once adding your code to JSFiddle, it was immediately not displaying correctly.
First issue is that you need another wrapper element to hold the containers (card__face). Also perspective cannot be inherited. Unfortunately the animation would not work unless a height was supplied on the main wrapper element. min-height did not work either.
You could run some JS and determine the height on load. (see CSS3 Flip Card with Automatic Height)
<div class="gallery-cell card flippable">
<div class="wrapper">
<div class='card__face card__face--front'>
<div class='card_contents'>
<h3>
$question
</h3>
</div>
</div>
<div class='card__face card__face--back'>
<div class='card_contents'>
<h3>
$answer
</h3>
</div>
</div>
</div>
</div>
.gallery-cell {
background-color: transparent;
width: 100%;
height: 100px;
perspective: 1000px;
}
.wrapper {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.5s;
transform-style: preserve-3d;
}
.gallery-cell:hover .wrapper,
.gallery-cell.flipped .wrapper {
transform: rotateY(180deg);
}
.card__face {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.card__face--front {
background-color: red;
}
.card__face--back {
background-color: #000;
color: white;
transform: rotateY(180deg);
}
.card_contents {
overflow-y: auto;
margin: 0;
display: flex;
}
I added the hover in case you wanted to test it - here's https://jsfiddle.net/rzqkpva9/