CSS3动画，iOS滚动问题

Question

我已经阅读了很多关于iOS滚动问题的帖子，我知道有些人遇到了问题。我尝试了很多修复，但我绝对坚持这个！

我正在创建一个单页网站。布局是一个3D立方体，使用CSS3变换和动画。简而言之，问题是前脸上的内容会滚动，其他脸上的内容不会。据我旋转面来创建立方体时，我可以告诉它。右脸的内容不会滚动，就像溢出：隐藏;

我不知道这会有多大用处，但我创造了一个小提琴。它使用部分代码（主要思想），并且整个批次都有相当多的发布。有没有人试图让溢出内容在旋转/转换后的父元素内滚动iOS？

我疯了，请帮忙！谢谢！

这是来自小提琴的我的SASS;

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/