Use Skrollr on Mobile when HTML height is 100%

I am attempting to use Skrollr in my website. Everything works fine except for on Mobile. On mobile you cannot scroll down the page.

I have determined this is because I have set both the html and body tags to have height: 100%. If I remove this css then the mobile version works fine. Although this css is critical to the main website so I need it in there. Is it possible to have keep this CSS and have the mobile version scrolling work properly?

JSFiddle

Note: I know I could make the sections fixed but this wont work in my website because there are static sections in the website aswell.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

    <style>
    html, body { 
        margin: 0; 
        padding: 0; 
        height: 100%; 
        width: 100%; 
    }

    section {
        padding: 5%;
        height:100%;
        background-color: red;

        width: 100%;
        min-height: 100%;
        overflow: hidden;

        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;

        -ms-flex-align: center;
        -webkit-align-items: center;
        -webkit-box-align: center;
        align-items: center;

        vertical-align: middle;

        position: relative;
    }

    </style>
</head>
<body id="skrollr-body">

    <section data-0="background-color: rgb(0,0,0);" data-500="background-color: rgb(0,0,255);">
        <div class="container vcenter">

            <h1> Some VCENTRED long long long long long long long long long text </h1>

        </div>
    </section>

    <section>
        <div class="container vcenter">

            <h1> Some VCENTRED long long long long long long long long long text </h1>

        </div>
    </section>

    <script src="js/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="js/skrollr.min.js"></script>
    <!--[if IE]>
            <script src="js/skrollr.ie.min.js"></script>
        <![endif]-->
    <script type="text/javascript">
        skrollr.init({ forceHeight: false, smoothScrolling: false, mobileDeceleration: 0.004 });
    </script>

</body>
</html>

Solution: T04435's answer worked. Heres how it was fixed:
Edit: Spoke too soon, it works on Android but not on iOS (iPhone specifically).

@media screen and (max-width:767px){
        html, body { 
            height: inherit;
        }

        section {
            height:100vh;
            min-height: 100vh;
        }
}

Solution

All you need as far as I understood is to set a media query to change the html,body heigth:100% in the mobiles

@media screen and (max-width:767px){
    html,body{
       // you might need to play with the value to see
       // which one fits toe your desired outcome
       heigth:initial;
    }
}

PLEASE CHECK THIS @MEDIA , so you can get the right values the one above is an example of what you need to do

HOPE this helps T04435