iPhone 6 CSS transition flicker issues - html

Question

Having CSS transition on two absolutely positioned elements one over another causes them to interfere on iPhone 6 (maybe iOS in general). Taking a close look reveals some flickering during the transition. I've tried various z-index and 3D transform hacks, but without any success so far so I am a bit tilted atm :(
<div class="flip-container c1">
<div class="flipper">
<div class="front"><!-- front content --></div>
<div class="back"><!-- back content --></div>
</div>
</div>
<div class="flip-container c2">
<div class="flipper">
<div class="front"><!-- front content --></div>
<div class="back"><!-- back content --></div>
</div>
</div>
<button onclick="$('.c2').toggleClass('flipped')">btn1</button>
css:
/* entire container, keeps perspective */
.flip-container {
perspective: 1000;
transform-style: preserve-3d;
-webkit-perspective: 1000;
-moz-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;
margin: 50px auto;
position: absolute;
top: 0;
border: 1px solid grey;
}
/* UPDATED! flip the pane when hovered */
.flip-container.flipped .back {
transform: rotateY(0deg);
}
.flip-container.flipped .front {
transform: rotateY(180deg);
}
.flip-container,
.front,
.back {
width: 320px;
height: 380px;
}
/* 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;
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(-180deg);
background: lightblue;
}
.c1 .front {
background: lightgrey;
}
.c2 .front {
background: teal;
}
link to an example:
http://codepen.io/AlphaVision/pen/avrVoj