前言
上一篇之後我從各個小夥伴那裡收集到了第二波移動端常見的bug以及其解決方案，部分解決方案可能不準確或者存在問題，希望有正確解決方案的給與評論。
備註：文中的bug收集於網路，解決方案可能並不準確，歡迎大家提供更加完整的方案。
建議閱讀時間：10-15min
fastclick導致下拉框焦點衝突
Q: 移動端使用fastclick之後，在ios環境下，有幾個連續的下拉框 第一個select框突然填充了第二個下拉框的內容。
A:根本原因是Fastclick導致IOS下多個 select ，點選某一個，焦點不停變換的bug。修改原始碼，在onTouchStart事件內判斷裝置是否為IOS，再判斷當前nodeName是否為select，如果是return false去阻止fastClick執行其他事件
github原始碼地址：fastclick.js
//line 391行
FastClick.prototype.onTouchStart = function(event) {
//在其方法中新增判斷 符合ios select的時候 不返回事件
if(deviceIsIOS&&this.targetElement =="select")
this.targetElement = null
event.preventDefault();
}
//line521 或者講原始碼中 有關touchEnd判斷非ios或者非select的事件註釋，
if (!deviceIsIOS || targetTagName !== 'select') {
this.targetElement = null;
event.preventDefault();
}
複製程式碼ios input不能自動獲取焦點
Q: 如題，希望在某個頁面時可以自動讓輸入框獲取焦點
A: 解決方案：
document.addEventListener('touchstart',function(e){document.getElementById('focus').focus();});不能把focus封裝起來起來觸發，那樣也無效
備註：具體實現效果待驗證，希望有時間的可以驗證追加可能的問題以及補充方案
去除webkit預設的滾動條
Q: 如題 A: 解決方案：
element::-webkit-scrollbar{
    display:none
  }
複製程式碼video 不能自動播放
Q: 如題 A: 解決方案： (1) autoplay 及 js 控制播放，仍然有部分裝置不起作用 (2)
$("html").one("touchstart",function(){
      video.play();
    })
複製程式碼inline-block元素使用vertical-align後，父元素高度被莫名撐開
Q: 如題，不一定出現在移動端，但是移動端會效果比較嚴重，一般是用於設定同行內容垂直居中的 A: 解決方案：
.par{
   font-size:0
  }
複製程式碼背景圖片沒實現自適應
Q: 如題 A: 解決方案：用background-size
element{
   background-size:100% 100%;
  }
複製程式碼css3 translate3d平移效果後的元素子元素閃動
Q: 應用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>
複製程式碼A: 解決方案： 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 ）
position:fixed 固定效果
Q: 當給指定元素新增position:fixed時首次載入頁面完成後，滑動整個網頁，新增此樣式的元素會跟隨頁面滾動（目的是固定此元素）。
A: 解決方案：
為其元素新增如下css屬性即可：-webkit-transform：translate3d(0,0,0)
備註：此方案不一定有效，需要後續驗證或者提供更好的方案
IOS鍵盤字母輸入，預設首字母大寫
Q: 如題 A: 解決方案：
<input type="text" autocapitalize="off" />
複製程式碼select 下拉選擇設定右對齊
Q: 如題，預設是左對齊，產品有其他需求 A: 解決方案：
select option {
direction: rtl;
}
複製程式碼通過transform進行skew變形，rotate旋轉會造成出現鋸齒現象
Q: 如題 A: 解決方案：
-webkit-transform: rotate(-4deg) skew(10deg) translateZ(0);
transform: rotate(-4deg) skew(10deg) translateZ(0);
outline: 1px solid rgba(255,255,255,0)
複製程式碼移動端點選延遲
Q: 如題 A: 解決方案：引用 fastclick.js
移動端點透問題
Q: 如題,當點選絕對定位元素的時候，下面的元素雖然被遮蓋，但也被觸發了。 A: 原因是：touchstart 早於 touchend 早於click。 亦即click的觸發是有延遲的，這個時間大概在300ms左右，也就是說我們tap觸發之後蒙層隱藏， 此時 click還沒有觸發，300ms之後由於蒙層隱藏，我們的click觸發到了下面的a連結上。 解決方案：
（1）儘量都使用touch事件來替換click事件。例如用touchend事件(推薦)。
（2）用fastclick，https://github.com/ftlabs/fastclick
（3）用preventDefault阻止a標籤的click
（4）延遲一定的時間(300ms+)來處理事件 （不推薦）
（5）以上一般都能解決，實在不行就換成click事件。
複製程式碼關於 iOS 系統中，中文輸入法輸入英文時，字母之間可能會出現一個六分之一空格
Q: 如題 A: 解決方案：通過正則替換
this.value = this.value.replace(/\u2006/g, '');
複製程式碼Retina屏的1px邊框
Q: 如題 A: 解決方案：
Element{
border-width: thin;
}
複製程式碼