CSS3 Animations, iOS Scrolling Issues - ios

Question

I've read quite a few SO posts on iOS scrolling issues, I'm aware a few people have had issues. I've tried numerous fixes but I'm absolutely stuck on this!
I'm making a one page website. The layout is a 3D cube, using CSS3 transforms and animations. In a nutshell, the problem is the content on the front face will scroll, the content on other faces wont. As far as I can tell this breaks when I rotate the faces to create the cube. The content in the right face will not scroll, it acts like overflow: hidden;
I don't know how useful this will be, but I've created an Fiddle. It uses on part of the code (the main idea) and the whole lot is quite a bit to post. Has anyone tried to get overflow content to scroll on iOS inside a rotated/transformed parent element before?
I'm going crazy, please help! Thanks!
Here's my SASS from the Fiddle;
body {
margin: 0;
padding: 0;
}
.cube-container {
width: 100%;
perspective: 2000px;
-webkit-perspective: 2000px;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0,0,0);
.cube-shell {
position: relative;
z-index: 1;
margin: 0 auto;
transform-style: preserve-3d;
transform: rotateY( 0deg ) translateX( 0px );
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0,0,0);
animation-duration: 1s;
animation-direction: normal;
animation-fill-mode: forwards;
animation-timing-function: ease;
&.rotate-center-to-right {
animation-name: center-to-right;
}
}
.face {
background-position: 50% 50%;
background-size: cover;
padding: 0;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0,0,0);
position: relative;
z-index: 10;
text-align: center;
width: 100%;
// When we are in "cube mode"
&.cube-compatible {
overflow: hidden;
position: absolute;
// z-index: 5;
top: 0;
left: 0;
right: 0;
// z-index: 0;
}
> .face-inner {
overflow: scroll;
// -webkit-overflow-scrolling: touch;
}
}
.face-inner {
max-width: 1320px;
max-height: 100%;
height: 100%;
width: 100%;
padding: 40px 60px;
margin: auto;
// display: inline-block;
display: block;
vertical-align: middle;
position: relative;
z-index: 30;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
// Center face
.face-center {
position: relative;
text-align: center;
background: #ccc;
}
// Right face
.face-right {
transform-origin: center right;
background: #efefef;
}
.scroll-content {
overflow: scroll;
-webkit-overflow-scrolling: touch;
height: 100%;
}
.scrollable {
-webkit-backface-visibility: hidden;
}
}
#keyframes center-to-right {
0% {
transform: rotateY( 0deg ) scale3d( 1, 1, 1 );
}
// 15% {
// transform: rotateY( 0deg ) scale3d( 0.90, 0.90, 0.90 ) translateY( 50px );
// }
// 75% {
// transform: rotateY( -90deg ) scale3d( 0.90, 0.90, 0.90 ) translateY( 50px );
// }
100% {
transform: rotateY( -90deg ) scale3d( 1, 1, 1 );
}
}
https://jsfiddle.net/fkb241ys/14/