淺析web移動開發常見的bug
隨著只能手機的普及，web開發也越來越受開發者的關注，下面是網路整理的一些常見web開發的bug，歡迎補充：
問題一：android4.0以上一部分手機的webview中，當canvas小於螢幕大小時，繪圖時會出現重影，就是說一個圖只繪製了一遍，卻出現了兩個
解決方案：
canvas外層的div需要設定屬性style="overflow:visible;-webkit-transform: translateZ(0);
問題二：使用HTML5的canvas進行繪圖，android4.0以上，有一大部分手機會經常出現clearRect無效的bug。
解決方案：
方案1:
用
[java] view plain copy
在CODE上檢視程式碼片派生到我的程式碼片
canvas.width=canvas.width
來代替
[java] view plain copy
在CODE上檢視程式碼片派生到我的程式碼片
canvas.clearRect().getContext("2d").clearRect()
但是，這樣做的後果，就是另有一小部分（比如國內的三星NOTE2和S4等）會出現瀏覽器卡死的情況。
方案2:
就是用不透明背景，對於每偵重繪的遊戲或應用來說，不透明背景就不會存在清屏的問題，當然這其實是選擇了繞行，對於需要將canvas背景設定成透明的情況還是沒有解決。
方案3:
[java] view plain copy
在CODE上檢視程式碼片派生到我的程式碼片
canvas.clearRect(0, 0, w, h);
canvas.style.visibility = ‘hidden’; // Force a change in DOM
canvas.offsetHeight; // Cause a repaint to take play
canvas.style.visibility = ‘inherit’; // Make visible again
這個會導致延時。
方案4:
[java] view plain copy
在CODE上檢視程式碼片派生到我的程式碼片
canvas.clearRect(0, 0, w, h);
canvas.style.display = ‘none’;// Detach from DOM
canvas.offsetHeight; // Force the detach
canvas.style.display = ‘inherit’; // Reattach to DOM
問題三：應用css3 translate3d平移效果後的標籤元素，在ios上的safari以及app的webview中會出現頁面載入完成後其子元素閃動現象，具體如下：
<ul style=”-webkit-transform: translate3d(0, 0, 0); -webkit-transition: 0ms; “>
<li><img src=”http://pic2.58.com/m58/m3/img/imglogo_gray.png” ref=”http://1.pic.58control.cn/p1/big/n_22998799743506.jpg”></li>
</ul>
解決方法（兩種）：
1、可在其子元素中統一新增和其相同的屬性，具體如下：
<ul style=”-webkit-transform: translate3d(0, 0, 0); -webkit-transition: 0ms; “>
<li style=”-webkit-transform: translate3d(0, 0, 0); “><img src=”http://pic2.58.com/m58/m3/img/imglogo_gray.png” ref=”http://1.pic.58control.cn/p1/big/n_22998799743506.jpg”></li>
</ul>
2、在其元素中新增如下屬性：
-webkit-backface-visibility: hidden; (設定進行轉換的元素的背面在面對使用者時是否可見：隱藏）
-webkit-transform-style: preserve-3d; (設定內嵌的元素在3D 空間如何呈現：保留3D ）
問題四；ios6修復了css position:fixed 1畫素抖動的bug，不過引出另一個bug：當給指定元素新增position:fixed時首次載入頁面完成後，滑動整個網頁，新增此樣式的元素會跟隨頁面滾動（目的是固定此元素）。
解決方法：
為其元素新增如下css屬性即可：
-webkit-transform：translate3d(0,0,0)（具體原因不知）
問題五：android手機，微信6.1，qq瀏覽器x5核心，這三個條件存在的前提下，在彈出輸入框的時候，整個canvas畫面會被壓扁。希望微信以後升級能解決這個問題吧。
解決方案：
目前還沒有找到完美的解決方案，如果有人知道，請一定告訴我。
感覺現在最好的辦法就是將canvas頁面和有輸入框的頁面分離開。
還有一種方法只能解決一部分手機的問題，就是在canvas的上一層的div中，設定style.width和style.height分別等於canvas的style.width和style.height，但是經過測試，這樣只能解決一部分手機。
問題六：android4.x中一部分手機，在改變canvas大小的時候有時會卡死。大家可能都知道，重新設定canvas的大小可以實現canvas的完全重新整理，但是也會導致一部分4.x手機卡死。
解決方案：
用clearRect重新整理canvas。