javascript - 单页 cordova 应用程序，仅在 IOS 中尝试滚动时内容不滚动并消失 - 由 ratchet.css 引起

Question

我写了一个 Cordova 单页应用程序。当我在我的 android 上运行它时，一切正常。当我把它放在 ipad 上时，一切都变得疯狂了。我通过安装插件解决了状态栏的问题，但是，

problem #1

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

problem #2

你不能向下滚动 ** 除非一切都消失了，然后你可以滚动但是除了白色背景什么都没有 **。您可以看到图像低于页面长度，但根本不允许您滚动。 (请记住，这是一个单页应用程序，因此它是通过 javascript 模板( handle )加载的。松开手指后，砰，一切又消失了。

有什么想法吗？这可能是某种奇怪的 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;

这似乎已经为我解决了这个问题。