Animation looking odd on iOS 8 local environment

Question

Hello I have a page on a project that consists of three cards that flip with different times one after the other.

It's working perfectly in every mobile browser but iOS Safari < 8.1

Funny thing is that if i get my isolated code and put it on a codepen, then try that codepen on the device or simulator (Xcode) it looks right, but in my local environment nope

Here is the codepen

http://codepen.io/dannygm/pen/ONXWJj

CODE

.silhouettes-container{margin:0 auto; padding: 0 16px 0 16px; text-align: center; width:100%;}

button{background: blue; color: #fff; padding: 20px;cursor:pointer;}

.flip-silhouette {display:inline-block; height:100px; position:relative; width:100px; z-index:1000;}

.flip-silhouette .front,
.flip-silhouette .back {display:block; height:100px; position:absolute; -webkit-backface-visibility:hidden; backface-visibility:hidden;  -webkit-transition:-webkit-transform 1s; transition:transform 1s; -webkit-transition:transform 1s; width:100px;}
.flip-silhouette .front {transform:perspective(300) rotateY(0); -webkit-transform:perspective(300) rotateY(0); z-index:900;}
.flip-silhouette .back {-webkit-transform:rotateY(-180deg); transform:rotateY(-180deg); z-index:800;}
.flipped .front {transform:rotateY(180deg); transform:perspective(300) rotateY(180deg); -webkit-transform:rotateY(180deg); -webkit-transform:perspective(300) rotateY(180deg);}
.flipped .back {z-index:950; transform:rotateY(0deg); -webkit-transform:rotateY(0deg); -webkit-transform:perspective(300) rotateY(0deg); transform:perspective(300) rotateY(0deg);}


.flipped .back1, .flipped .front1{transition-delay:0.8s; -webkit-transition-delay:0.8s;}
.flipped .back2, .flipped .front2{transition-delay:1s; -webkit-transition-delay:1s;}
.flipped .back3, .flipped .front3{transition-delay:1.2s; -webkit-transition-delay:1.2s;}

And in this GIF you can see how it looks on my local env. (by the way, I stripped my page to contain only the card, also removed everything from the view, I'm using handlebars.js)

Any idea or help of what might be causing it?

Answer 1

Try removing the perspective: 300 from all the current transforms and add:

.silhouettes-container { 
    -webkit-perspective: 300;
    perspective: 300;
}

I can't test it at the moment myself, since I don't have a device with iOS8, but this is the way I usually do it (and I've never had troubles with iOS8 before), and if you google for "ios 8 perspective bug css" there also seem to be other people who are having troubles with transitions on iOS8 while using perspective within the transform property (though I couldn't find a clear example of any post containing the exact same issue).