Safari移動文本輸入問題

此問題發生在我的iPhone 6 plus上。這個問題不會發生在我的iphone 5C上。Safari移動文本輸入問題

在我的一個頁面上，我有一個覆蓋div，當按下按鈕時顯示一個固定的位置，並在該div上有幾個輸入。覆蓋div可滾動以適應所有輸入。輸入所述輸入時會發生一些奇怪的事情。

打字時，覆蓋div隨着每次按鍵都向上「浮動」。該頁面不滾動或任何東西，div只是向上移動。這幾乎就像我在文本字段上按回車一樣，並跳到一個新的行。一旦我按下完成，div將返回到正確的位置，並且輸入中的文本是正確的。
編輯 - 通過設置HTML和正文標記溢出來解決此問題：當點擊顯示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"/>

來源

2015-03-24 user3476345

審查所有的CSS並確保不包含任何這些標記/技巧

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

但是，如果您的問題仍然存在，請嘗試更改。您可以爲div元素指定z-index。

我希望我能幫上忙。

來源

2015-03-25 00:13:53

這些標籤都沒有在那裏。我試圖改變汽車，也沒有工作。另外，我意識到我的頁面沒有滾動下來，而是我的div隨着每次按鍵都向上飄浮。我不知道爲什麼，很奇怪。 – user3476345 2015-03-25 00:21:35

在iPhone 6中不加運行良好？因爲Plus版本的分辨率可能會受到影響。 – 2015-03-25 00:27:36

雖然不是Safari移動版，但它在Chrome移動版上運行良好。 – user3476345 2015-03-25 00:30:43

我有同樣的問題。當有人在輸入中輸入所有div時，輸入周圍的內容就會消失。我的修復是增加位置：相對;到表單標籤。

來源

2016-03-25 08:45:26 Sams

這對我有效，謝謝！ – iPzard 2018-01-09 22:16:52

Safari移動文本輸入問題

回答

相關問題