Cordova single page app, content does not scroll and disappears when trying to scroll on IOS only - called by ratchet.css

I have written cordova, a single page application. When I run it on my android everything works fine. When I put it on my ipad, everything goes crazy. I fixed the status bar issue by installing the plugin, however

problem #1

      

        
        
        
      

    

home page loads a bunch of images (boxes). If I am not touching anything, you can see the ones on the display. as soon as you try to scroll up or down, everything disappears from view, but is still there. If you click on the screen, it will link to the correct content. When you return from the content, the items will come back again until you try to scroll up or down.

problem #2

      

        
        
        
      

    

you cannot scroll down **, but only after everything is gone, you can scroll, but there is nothing but a white background **. you can see the images are below the page length, but you cannot scroll at all. (remember this is a single page app, so it loads via javascript templates (rudders). And after you release your finger, bam, everything disappears again.

any ideas? Could this be some weird CSS issue or do I need to do javascript scrolling? again, everything is fine on android.

meta tag

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

      

        
        
        
      

    

code index.html

<script id="home-tpl" type="text/template">
    <header class="bar bar-nav">
        {{#if loggedin}}
            <div class="pull-right logout">Logout</div>
        {{/if}}
        <div class="logo"><img width='74px' src="assets/img/happy_transparent_100.png"></div>
    </header>
    <div class="content"></div>
</script>

<script id="list-tpl" type="text/template">
    <div id="container">
        {{#each cs}}
            <div class="media-body holder">
                <a href="#c/{{id}}">
                    <img class="thumb pull-left emp-pic" src="http://dev.{{thumb}}" />
                </a>
                <div id="picture{{id}}" class="max170">
                    <div class="stars">
                        {{#each stars}}
                            <div class="{{this}}"></div>
                        {{/each}}
                    </div>
                    {{#unless user_voted}}
                    <div class="thumbs">
                        <div data-pic={{id}} class="vote thumb_up">{{up}}</div>
                        <div data-pic={{id}} class="vote thumb_down">{{down}}</div>
                    </div>
                    {{/unless}}
                </div>
            </div>
        {{/each}}
    </div>
</script>

      

        
        
        
      

    

rendering:

HomeView.prototype.template = Handlebars.compile($("#home-tpl").html());
ListView.prototype.template = Handlebars.compile($("#list-tpl").html());
...

...
this.$el.html(this.template(c));
...

      

        
        
        
      

    

style:

.content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
background-color: #fff;
}

.container {
display: flex;
flex-wrap: wrap;
}

.holder {
float: left;
padding-bottom: 5px;
width: 166px;
flex-grow: 1;
}

.thumb {
margin-bottom: 3px;
flex-grow: 1;
max-width: 200px;
width: 100%;
}

.pull-left{
float:left;
}

.max170 {
max-width: 200px;
}

      

        
        
        
      

    

thank