单页cordova app,内容不滚动并且在尝试仅在IOS中滚动时消失 - 由ratchet.css引起

Question

我写了一个cordova,单页应用程序.当我在我的android上运行它一切正常.当我把它放在iPad上时,事情就变得疯狂了.我通过安装插件修复了状态栏的问题,但是,

problem #1

主页加载一堆图像(框).如果我没有触摸任何东西,你可以看到显示屏上的那些.一旦你尝试向上或向下滚动,一切都会从视图中消失,但仍然存在.如果您点击屏幕,它将链接到正确的内容.当您从内容返回时,项目会再次返回,直到您尝试向上或向下滚动.

problem #2

你不能向下滚动**,除非一切都消失,然后你可以滚动,但没有什么,但白色背景**.你可以看到图像低于页面的长度,但它根本不允许你滚动.(记住这是一个单页应用程序,所以这是通过javascript模板(把手)加载.然后释放你的手指,bam,一切都消失了.

有任何想法吗？这可能是某种奇怪的CSS问题还是我需要实现javascript滚动？再一次,android上的一切都很好.

元标记

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

代码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>

渲染:

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

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

样式:

.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;
}

谢谢

Answer 1

在参考https://github.com/twbs/ratchet/issues/138这是一个有点已知的问题,虽然经常看.它实际上很容易解决:

转到ratchet.css和第267行(.content {...})改变

-webkit-overflow-scrolling: touch;

至

-webkit-overflow-scrolling: auto;

而这似乎已经为我修好了.