亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

iOS下的 Fixed BUG

Genng / 2309人閱讀

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

可觸發(fā)條件

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

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

鍵盤彈起后手動(dòng)滾動(dòng)頁面

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

原因

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

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

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

.content {
    /* main絕對(duì)定位，進(jìn)行內(nèi)部滾動(dòng) */
    position: absolute;
    top: 0;
    bottom: 0;
    right:0;
    left:0;
    /* 使之可以滾動(dòng) */
    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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/53154.html

相關(guān)文章

  • iOS下的 Fixed BUG

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

    Aklman 評(píng)論0 收藏0

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

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

    妤鋒シ 評(píng)論0 收藏0

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

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

    xbynet 評(píng)論0 收藏0

  • Issues with position fixed & scroll（移動(dòng)端 fixed

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

    Jiavan 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<