Question

我创建了一个网络表单，其中包含一个自定义输入字段，类型为＆＃34; text＆＃34;。

CSS看起来像

input {
height: 39px;
font-size: 14px;
color: #fff;
background: #000000 url(../img/search-bg-white.png) no-repeat 95% center;
border: none;
padding: 0 50px 0 10px;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}

当我在iPhone 6上点击它时，所有元素都是desapiare，在没有这个输入的情况下排除了表单元素

结果是http://gyazo.com/790da935bbfc946420cd37a24b2302db，我不明白该怎么做

Answer 1

我在各种iOS 8+ webview应用程序中看到了大量消失的元素，奇怪的滚动行为和键盘问题。这个问题似乎与在可滚动元素中嵌入输入或者可滚动元素与页面上的其他元素的组合相关 - 我无法将其隔离。（我看到的行为并不总是出现在有输入的页面上，所以@Josh Crozier上面的答案对我的案例有100％的时间。）

我找到的解决方案是等到页面渲染完成后，然后调整滚动元素的z-index，我假设它正在强制渲染引擎重新绘制图层。

要测试这是否适合您，请尝试通过USB在连接到开发人员Mac的iPhone 6上加载页面，然后在Safari中检查页面。在您点击输入字段之前，使用Safari开发工具调整父可滚动容器的z-index（如果不存在，则添加z-index）。然后点击该字段，看看是否仍然存在问题。如果问题没有发生，您必须在页面上附加一些JavaScript，以便在呈现页面后强制重新绘制/重新布局/重新调整页面。

祝你好运。：\

Answer 2

我找到了这个bug的解决方案。我把body元素css属性--webkit-overflow-scrolling：touch和当我删除它时 - 一切正常。

带输入类型=“文字”的iOS包

2 个答案: