0

我正在创建一个 Web 表单，它有一个“文本”类型的自定义输入字段。

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 上点击它时，所有元素都将在没有此输入的情况下排除表单元素

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

4

2 回答 2

0

我找到了这个错误的解决方案。我穿上 body element css property -webkit-overflow-scrolling: touch ，当我删除它时 - 一切正常。

于 2015-02-23T08:10:15.347 回答
0

我已经在各种 iOS 8+ webview 应用程序上看到了许多消失的元素、奇怪的滚动行为和键盘问题。该问题似乎与在可滚动元素中嵌入输入有关，或者与可滚动元素与页面上其他一些元素的组合有关——除此之外，我无法将其隔离。（我看到的行为并不总是出现在有输入的页面上，所以上面@Josh Crozier 的回答对于我的情况来说100% 的时间都有效。）

我找到的解决方案是等到页面被渲染之后，然后调整滚动元素的 z-index，我假设这会迫使渲染引擎重新绘制图层。

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

祝你好运。:\

于 2015-02-10T18:01:48.313 回答