overlapping each other when performing rotate3d animation on one of them - css

Question

I have a few divs in a container:
<div class="waves-container" id="waves_container">
<div class="wave-wrapper wave-back">
<img src="static/images/waves/sea_back.png" class="wave-top" />
<div class="wave-bottom"></div>
</div>
<div class="wave-wrapper wave-front">
<img src="static/images/waves/sea-front.png" class="wave-top" />
<div class="wave-bottom" id="wave_bottom_front">Some additional divs are created here dynamically with JS</div>
</div>
<div class="play-button" id="play_button">
<img src="static/images/ccs_shake_waves/play.png" />
</div>
</div>
Their CSS:
.waves-container {
width: 100%;
height: 50%;
position: absolute;
bottom: -35%;
-webkit-transition: bottom 0.4s ease-in-out;
}
.wave-wrapper {
width: 105%;
height: 130%;
position: absolute;
left: -5%;
}
.wave-top {
width:100%;
height: auto;
position:relative;
bottom: 0;
left: 0;
float: left;
}
.wave-bottom {
width: 100%;
height: 130%;
position: relative;
clear:both;
float: left;
background-color: #fd51df;
}
.wave-back {
-webkit-animation: wave 3s 1s infinite linear;
top: 1.5%;
}
.wave-front {
top: -12%;
-webkit-animation: wave 3s infinite linear;
}
.play-button {
width: 70%;
height: auto;
position: relative;
margin: 0 auto;
top: 50%;
-webkit-transform: translateY(-50%) scale(0, 0);
z-index:1;
display: none;
}
With JS on a certain event I'm attaching an animation class to #play_button:
.pop-play {
-webkit-animation: flipInY 1s 1 forwards ease-out, play 3s 1s infinite linear;
}
In flipInY I'm animating this div on Y axis:
#-webkit-keyframes flipInY {
0% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg) translateY(-50%);
-webkit-transition-timing-function: ease-in;
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg) translateY(-50%);
-webkit-transition-timing-function: ease-in;
}
60% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg) translateY(-50%);
opacity: 1;
}
80% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg) scale(1.05, 1) translateY(-50%);
}
100% {
-webkit-transform: perspective(400px) scale(1.1, 1) translateY(-50%);
-webkit-transition-timing-function: ease-out;
}
}
In Android I see it just fine. However in iOS the play_button div overlaps with underlying div when it flips on Y axis, so every time I see 50% of the image, the rest of that div is "under" another div.
I tried to add -webkit-transform: translate3d(0,0,0); to every underlying div, tried to change z-indexes, tried to combine it, tried to use
-webkit-perspective: 1000;
-webkit-transform-style: preserve-3d;
on the waves-container div and all the child divs, but they're still overlapping, until the flipping animation finishes and the other begins.
Why is it happening and how can I fix it?