国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

iOS下的 Fixed BUG

Genng / 2243人閱讀

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

可觸發(fā)條件

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

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

鍵盤彈起后手動滾動頁面

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

原因

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

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

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

.content {
    /* main絕對定位，進(jìn)行內(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://specialneedsforspecialkids.com/yun/53154.html

相關(guān)文章

  • iOS下的 Fixed BUG

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

    Aklman 評論0 收藏0

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

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

    妤鋒シ 評論0 收藏0

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

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

    xbynet 評論0 收藏0

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

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

    Jiavan 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<