Safari 移动文本输入问题

Question

这个问题发生在我的 iPhone 6 plus 上。这个问题在我的 iphone 5C 上没有出现。

在我的一个页面上，我有一个具有固定位置的覆盖 div，当按下按钮时会显示该位置，并且在该 div 上有一些输入。覆盖 div 可滚动以适应所有输入。输入所述输入时会发生一些奇怪的事情。

• 键入时，覆盖 div 会随着每次按键而向上“浮动”。页面不滚动或任何东西，div 只是向上移动。这几乎就像我在文本字段上按回车键并跳到新行一样。一旦我按下完成，div 就会返回到正确的位置，并且输入中的文本是正确的。

• 编辑 - 通过将 HTML 和 Body 标签都设置为溢出来解决此问题：单击显示 div 的按钮时隐藏。我会留下这个问题，以防其他人遇到这个当我点击其中一个输入并且Safari放大/聚焦它时，有时div会消失，基本上它只是变得透明。经过调查，div（已修复）一直下降到页面底部而页面实际上没有滚动，这就是它看起来消失的原因。当我按“完成”时，它会再次出现在顶部。

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

这是一个已知问题吗？我有一个问题导致背景滚动而不是 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 和输入都会消失。我的解决方法是添加 position:relative;到表单标签。

Answer 2

查看您的所有 CSS 并确保不包含任何这些标签/技巧

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

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

-webkit-overflow-scrolling: auto;

或者您可以为 div 元素分配z-index。

希望我能帮上忙。