iOS下的 Fixed BUG

時間 2019-11-07

標籤 ios fixed bug 欄目 iOS 简体版

原文原文鏈接

input 光標位置亂竄

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

可觸發條件

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

經過調試工具發現鍵盤彈起視圖向上調整了，但頁面中元素所佔的位置，其實並無向上進行調整；輸入框所佔的位置仍是原來鍵盤未彈起時的位置

input位置

緣由

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

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

解決思路

iOS 下因爲軟鍵盤喚出後，頁面 fixed 元素會失效，致使跟隨頁面一塊兒滾動，假若頁面不會過長出現滾動，即使 fixed 元素失效，也沒法跟隨頁面滾動，也就不會出現上面的問題了css

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

<body>
    <div class="content">
       <!-- 內容在這裏... -->
    </div>   
</body>