single page cordova app, content not scrolling and disappears when attempting to scroll in IOS only - caused by ratchet.css

Question

I have written a cordova, single page app. When I run it on my android everything works fine. When I put it on the ipad things are going crazy. I fixed the problem with the status bar by installing a plugin, however,

problem #1

the home page loads a bunch of images (boxes). If I don't touch anything, you can see the ones that are 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 are back again, until you try to scroll up or down.

problem #2

you can't scroll down ** except after everything disappears, then you can scroll but there is nothing there but white background **. you can see that the images are below the length of the page, but it doesn't allow you to scroll at all. (remember this is a single page app so this is loaded in via javascript templates (handlebars). And after you release your finger, bam, everything disappears again.

any ideas? Could this be some kind of weird CSS issue or do I need to have a javascript scroll implemented? 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;
}

thanks

Answer 1

In reference to https://github.com/twbs/ratchet/issues/138 this is a somewhat known issue though often over looked. Its actually an easy fix:

Goto ratchet.css and around line 267 (.content{...}) change

-webkit-overflow-scrolling: touch;

to

-webkit-overflow-scrolling: auto;

and that appears to have fixed it for me.

Answer 2

Add this line to your config.xml file:

<preference name="ScrollEnabled" value="true" />