移動頁面排坑BUG彙總

時間 2019-12-12

標籤移動頁面 bug 彙總欄目無線简体版

原文原文鏈接

## video標籤脫離文檔流

問題描述：標籤的父元素(祖輩元素)設置transform樣式後，標籤會脫離文檔流html

測試環境：部分android機型android

解決辦法：不使用transform屬性。translate用top、margin等屬性替代web

## ::after在手機中使用animation無效

問題描述：::after在手機不支持animationcanvas

解決辦法：不用僞元素改成普通元素瀏覽器

## 頁面高度渲染錯誤

問題描述：頁面100%高度包含地址欄高度，當地址欄存在時，會部份內容被隱藏緩存

環境與頻率：常常性出現;各移動瀏覽器微信

解決辦法：重置<html>ide

高度：document.documentElement.style.height = window.innerHeight + 'px'函數

## 疊加區高亮

問題描述：使用click也會出現綁定點擊區域閃一下的狀況佈局

環境與頻率：部分android機型

解決辦法：給該元素一個樣式 -webkit-tap-highlight-color:Ωrgba(0,0,0,0);

## 事件沒法被觸發

問題描述：focus、touch、click等事件均無效

環境與頻率：android微信部分機型

解決辦法：該元素其CSS屬性裏增長 -webkit-transform: translate3d(0,0,0)

## :active 效果不兼容

問題描述：CSS active僞類無效

環境與頻率：android 4.2如下

解決辦法：該元素的touch系列的事件綁定一個空匿名方法

   element.addEventListener('touchstart',function(){},false);

## 瀏覽器崩潰

問題描述：解綁函數寫在了事件處理中致使微信崩潰

環境與頻率：小米微信

解決辦法：解綁事件不要寫在事件處理中

## 預加載與自動播放無效

問題描述：audio的preload、autoplay 沒法直接起效環境與頻率：受操做系統、瀏覽器（webview）、版本等影響

解決辦法：捕捉一次用戶輸入後，讓音頻加載實現預加載

   //play and pause it once
   document.addEventListener('touchstart', function () {
   document.getElementsByTagName('audio')[0].play();
   document.getElementsByTagName('audio')[0].pause();
   });

## 沒法同時播放多音頻

問題描述：播放後一音頻會打斷前一音頻，而不會同步播

環境與頻率：android

解決辦法：合理降權與選擇不一樣的音頻，不一樣音頻營造儘可能一致的氛圍。

## 不支持局部滾動

問題描述：除body(html)元素外 overflow:scroll 無效

環境與頻率：android 2.X

解決辦法：一、巧用佈局利用body(html)全局滾動二、iscroll、自寫js控制translate、scrollTop模擬

## input:password 密碼輸入框出現懸浮怪異輸入框

問題描述：怪異懸浮的表單

環境與頻率：部分android機型

解決辦法：使用input:text類型而非password類型，並設置其設置 -webkit-text-security: disc; 隱藏輸入密碼從而解決

## 初始化頁面時獲取不到寬高

問題描述：內嵌瀏覽器的ready跟咱們jq或者zoto提供的方法不同，不通用

測試環境：內嵌瀏覽器

解決辦法：

var inter=setInterval(function(){
    if ($win.width()){
        //你的代碼
        clearInterval(inter);
    }
},10);

## 不一樣單位在手機端不能用

問題描述：如100%在手機端展示不一致

測試環境：/

解決辦法：100% -> 100px

## webkit與標準顏色漸變方向相差90度

問題描述：webkit與標準顏色漸變方向相差90度 background:-webkit-linear-gradient(0deg,#3d86c8,rgba(61,134,200,0) 25%,rgba(61,134,200,0) 75%,#3d86c8);background:linear-gradient(90deg,#3d86c8,rgba(61,134,200,0) 25%,rgba(61,134,200,0) 75%, #3d86c8);

測試環境：/