Question

此问题发生在我的iPhone 6 plus上。我的iphone 5C上不会出现此问题。

在我的一个页面上，我有一个叠加div，其中一个固定位置在按下按钮时显示，而在该div上有一些输入。 overlay div可滚动以适合所有输入。输入所述输入时会发生一些奇怪的事情。

键入时，叠加div会在每次按键时“浮动”。页面不滚动或任何东西，div只是向上移动。这几乎就像我按下文本字段上的返回一样，然后跳转到一个新行。按下完成后，div返回到正确的位置，输入中的文本是正确的。
编辑 - 通过将HTML和Body标记设置为溢出来修复此问题：在单击显示div的按钮时隐藏。我会留下这个问题以防万一其他人碰到这个当我点击其中一个输入并且Safari缩放/聚焦它时，有时div消失，基本上它变得透明。在调查时，div（已修复）一直下降到页面底部，而页面实际上没有滚动，这就是它看起来消失的原因。当我按“完成”时，它再次重新出现。

这些都不会发生在桌面/“完整”版本或移动设备上。

这是一个已知问题吗？我有一个问题导致背景滚动而不是div，直到我添加了这个

 -webkit-overflow-scrolling: touch;

这是表格，数据绑定是针对knockout.js

<label class = "overlay_div_label" for ="name">Name</label>
<input type = "text" class = "overlay_div_input" data-bind = "value: name"/>

<label class = "overlay_div_label" for ="email">email</label>
    <input type = "text" class = "overlay_div_input" data-bind = "value: email"/>

<label class = "overlay_div_label" for ="city">City</label>
    <input type = "text" class = "overlay_div_input" data-bind = "value: city"/>

<label class = "overlay_div_label" for ="contactTime">Contact Time</label>
    <input type = "text" class = "overlay_div_input" data-bind = "value: contactTime"/>

Answer 1

我有同样的问题。当有人输入输入时，所有div和inpust周围的输入就会消失。我的修复是增加位置：相对;到表格标签。

Answer 2

检查所有CSS并确保不包含任何这些标记/技巧

-webkit-transform: translateZ(0px);
-webkit-transform: translate3d(0,0,0);
-webkit-perspective: 1000;

但如果您的问题仍然存在，请尝试更改。

-webkit-overflow-scrolling: auto;

或者您可以为div元素指定z-index。

我希望我能帮忙。

Safari移动文本输入问题

2 个答案: