成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

iOS下的 Fixed BUG

Genng / 2251人閱讀

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

可觸發(fā)條件

頁面body出現(xiàn)滾動條

點擊頁面出現(xiàn)用fixed定位的彈框，彈框內(nèi)有輸入框，鍵盤彈起，頁面發(fā)生滾動

鍵盤彈起后手動滾動頁面

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

原因

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

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

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

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


    

       
    
   

這樣不管是彈框里的input還是input位置都能一勞永逸
相關(guān)資源

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/53154.html

相關(guān)文章

  • iOS下的 Fixed BUG

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

    Aklman 評論0 收藏0

  • 第六天 移動端Web開發(fā)注意事項

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

    妤鋒シ 評論0 收藏0

  • 第六天 移動端Web開發(fā)注意事項

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

    xbynet 評論0 收藏0

  • Issues with position fixed & scroll（移動端 fixed

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

    Jiavan 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<