iOS下的 Fixed BUG

Aklman 發布于2019-08-29 17:04 / 1424人閱讀

input 光標位置亂竄

固定式浮層內的輸入框光標會發生偏移。即?fixed?定位的容器中輸入框光標的位置顯示不正確，沒有正常地顯示在輸入框中，而是偏移到了輸入框外面

可觸發條件

頁面body出現滾動條

點擊頁面出現用fixed定位的彈框，彈框內有輸入框，鍵盤彈起，頁面發生滾動

鍵盤彈起后手動滾動頁面

通過調試工具發現鍵盤彈起視圖向上調整了，但頁面中元素所占的位置，其實并沒有向上進行調整；輸入框所占的位置還是原來鍵盤未彈起時的位置

input位置

原因

?軟鍵盤喚起后，頁面的 fixed 元素將失效，所以當頁面超過一屏且滾動時，失效的 fixed 元素就會跟隨滾動了

不僅限于?type=text?的輸入框，凡是軟鍵盤（比如時間日期選擇、select 選擇等等）被喚起，都會遇到同樣地問題

解決思路

?iOS 下由于軟鍵盤喚出后，頁面 fixed 元素會失效，導致跟隨頁面一起滾動，倘若頁面不會過長出現滾動，即便 fixed 元素失效，也無法跟隨頁面滾動，也就不會出現上面的問題了

.content {
    /* main絕對定位，進行內部滾動 */
    position: absolute;
    top: 0;
    bottom: 0;
    right:0;
    left:0;
    /* 使之可以滾動 */
    overflow-y: scroll;
    /* 增加該屬性，可以增加彈性 */
    -webkit-overflow-scrolling: touch;
}

這樣不管是彈框里的input還是input位置都能一勞永逸

相關資源

https://bugs.webkit.org/show_... （Wrong caret position for input field inside a fixed position parent on iOS 11 ）

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114084.html

iOS下的 Fixed BUG

input 光標位置亂竄固定式浮層內的輸入框光標會發生偏移。即?fixed?定位的容器中輸入框光標的位置顯示不正確，沒有正常地顯示在輸入框中，而是偏移到了輸入框外面 showImg(https://segmentfault.com/img/bVbiJCo?w=750&h=1334); 可觸發條件頁面body出現滾動條點擊頁面出現用fixed定位的彈框，彈框內有輸入框，鍵盤彈起，頁面發生滾...

Genng 2019-08-02 11:50 評論0 收藏0
第六天移動端Web開發注意事項

摘要：隨著移動互聯網的發展，移動已經逐漸成為互聯網的主要入口，隨之而來的是前端在移動開發上面臨的各種機遇與挑戰，本文就一些常見移動端問題對移動開發需要注意的事項進行一下總結，必然不可能涉及方方面面，但會隨著筆者的積累持續更新。隨著移動互聯網的發展，移動Web已經逐漸成為互聯網的主要入口，隨之而來的是前端在移動Web開發上面臨的各種機遇與挑戰，本文就一些常見移動端問題對移動Web開發需要注意...

妤鋒シ 2019-08-30 13:09 評論0 收藏0
第六天移動端Web開發注意事項

摘要：隨著移動互聯網的發展，移動已經逐漸成為互聯網的主要入口，隨之而來的是前端在移動開發上面臨的各種機遇與挑戰，本文就一些常見移動端問題對移動開發需要注意的事項進行一下總結，必然不可能涉及方方面面，但會隨著筆者的積累持續更新。隨著移動互聯網的發展，移動Web已經逐漸成為互聯網的主要入口，隨之而來的是前端在移動Web開發上面臨的各種機遇與挑戰，本文就一些常見移動端問題對移動Web開發需要注意...

xbynet 2019-08-01 15:58 評論0 收藏0
Issues with position fixed & scroll（移動端 fixed

摘要：同時，請在其他移動端瀏覽器也這么處理，不要只對蘋果做這些處理。蘋果對于虎頭蛇尾的做法真讓人頭疼，這作風跟巨硬真像。轉載請注明英文原文及譯文出處原文地址：Issues with position fixed & scrolling on iOS 原文作者：Remy Sharp譯文地址：移動端 fixed 和 scroll 問題譯文作者：鎏金圣手火麒麟最近在做iOS端的H5頁面...

Jiavan 2019-08-21 17:00 評論0 收藏0