移動端遇到的bug (長期更新)

時間 2019-11-18

標籤移動遇到 bug 長期更新欄目無線简体版

原文原文鏈接

移動端遇到的bug

border-radius和transform在一塊兒的bug

當父級設置了border-radius+overflow:hidden的時候，圓角是能夠包住子級的，這是個很常見的場景。
可是當子級設置了transform屬性後，bug就發生了。
準確來講是在移動端纔會發生bug, pc端是正常的，具體的表現是: 父級的圓角沒法包住運動中的子級。
解決方法也很簡單，就是在父級添加transform:rotate(0deg)屬性。手機查看例子
至於爲何出現這種問題，以及解決bug的原理，本人暫時沒法解答。 💔html

表單退出鍵盤在ios微信端的bug

具體bug: 在ios微信端，當在輸入框喚起鍵盤後，頁面會擡升，輸入完成鍵盤退出後，頁面並無自動恢復到原來的樣子, 越接近頁面底部越明顯。
解決方法是使用document.documentElement.scrollIntoView(false),讓頁面自動回滾。手機查看例子ios

;(/iphone|ipod|ipad/i.test(navigator.appVersion) && navigator.userAgent.indexOf('MicroMessenger') >= 0) && (function () {

    document.addEventListener('blur', function (e) {
    // 這裏加了個類型判斷，由於a等元素也會觸發blur事件
    if (e.target && e.target.localName) {
        ['input', 'textarea'].indexOf(e.target.localName) !== -1 && document.documentElement.scrollIntoView(false)
    }
    }, true);
})();