前言
上一篇之后我從各個(gè)小伙伴那里收集到了第二波移動(dòng)端常見的bug以及其解決方案捣卤，部分解決方案可能不準(zhǔn)確或者存在問題瞧剖，希望有正確解決方案的給與評(píng)論苏潜。
備注：文中的bug收集于網(wǎng)絡(luò)漱受，解決方案可能并不準(zhǔn)確瞻凤，歡迎大家提供更加完整的方案。
建議閱讀時(shí)間：10-15min
fastclick導(dǎo)致下拉框焦點(diǎn)沖突
Q: 移動(dòng)端使用fastclick之后担租，在ios環(huán)境下砸民，有幾個(gè)連續(xù)的下拉框 第一個(gè)select框突然填充了第二個(gè)下拉框的內(nèi)容。
A:根本原因是Fastclick導(dǎo)致IOS下多個(gè) select 奋救，點(diǎn)擊某一個(gè)，焦點(diǎn)不停變換的bug反惕。修改源碼尝艘，在onTouchStart事件內(nèi)判斷設(shè)備是否為IOS，再判斷當(dāng)前nodeName是否為select姿染，如果是return false去阻止fastClick執(zhí)行其他事件
github源碼地址：fastclick.js
//line 391行
FastClick.prototype.onTouchStart = function(event) {
//在其方法中添加判斷 符合ios select的時(shí)候 不返回事件
if(deviceIsIOS&&this.targetElement =="select")
this.targetElement = null
event.preventDefault();
}
//line521 或者講源碼中 有關(guān)touchEnd判斷非ios或者非select的事件注釋背亥，
if (!deviceIsIOS || targetTagName !== 'select') {
this.targetElement = null;
event.preventDefault();
}
ios input不能自動(dòng)獲取焦點(diǎn)
Q: 如題，希望在某個(gè)頁面時(shí)可以自動(dòng)讓輸入框獲取焦點(diǎn)
A: 解決方案：
document.addEventListener('touchstart',function(e){document.getElementById('focus').focus();});不能把focus封裝起來起來觸發(fā)悬赏，那樣也無效
備注：具體實(shí)現(xiàn)效果待驗(yàn)證狡汉，希望有時(shí)間的可以驗(yàn)證追加可能的問題以及補(bǔ)充方案
去除webkit默認(rèn)的滾動(dòng)條
Q: 如題
A: 解決方案：
element::-webkit-scrollbar{
display:none
}
video 不能自動(dòng)播放
Q: 如題
A: 解決方案：
(1) autoplay 及 js 控制播放，仍然有部分設(shè)備不起作用
(2)
$("html").one("touchstart",function(){
video.play();
})
inline-block元素使用vertical-align后闽颇，父元素高度被莫名撐開
Q: 如題盾戴，不一定出現(xiàn)在移動(dòng)端，但是移動(dòng)端會(huì)效果比較嚴(yán)重兵多，一般是用于設(shè)置同行內(nèi)容垂直居中的
A: 解決方案：
.par{
font-size:0
}
背景圖片沒實(shí)現(xiàn)自適應(yīng)
Q: 如題
A: 解決方案：用background-size
element{
background-size:100% 100%;
}
css3 translate3d平移效果后的元素子元素閃動(dòng)
Q: 應(yīng)用css3 translate3d平移效果后的標(biāo)簽元素尖啡，在ios上的safari以及app的webview中會(huì)出現(xiàn)頁面加載完成后其子元素閃動(dòng)現(xiàn)象，具體如下：
<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剩膘、可在其子元素中統(tǒng)一添加和其相同的屬性衅斩，具體如下：
<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; (設(shè)置進(jìn)行轉(zhuǎn)換的元素的背面在面對(duì)用戶時(shí)是否可見：隱藏）
-webkit-transform-style: preserve-3d; (設(shè)置內(nèi)嵌的元素在3D 空間如何呈現(xiàn)：保留3D ）
position:fixed 固定效果
Q: 當(dāng)給指定元素添加position:fixed時(shí)首次加載頁面完成后怠褐，滑動(dòng)整個(gè)網(wǎng)頁畏梆，添加此樣式的元素會(huì)跟隨頁面滾動(dòng)（目的是固定此元素）。
A: 解決方案：
為其元素添加如下css屬性即可：-webkit-transform：translate3d(0,0,0)
備注：此方案不一定有效奈懒，需要后續(xù)驗(yàn)證或者提供更好的方案
IOS鍵盤字母輸入奠涌，默認(rèn)首字母大寫
Q: 如題
A: 解決方案：
<input type="text" autocapitalize="off" />
select 下拉選擇設(shè)置右對(duì)齊
Q: 如題，默認(rèn)是左對(duì)齊筐赔，產(chǎn)品有其他需求
A: 解決方案：
select option {
direction: rtl;
}
通過transform進(jìn)行skew變形铣猩，rotate旋轉(zhuǎn)會(huì)造成出現(xiàn)鋸齒現(xiàn)象
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)
移動(dòng)端點(diǎn)擊延遲
Q: 如題
A: 解決方案：引用 fastclick.js
移動(dòng)端點(diǎn)透問題
Q: 如題,當(dāng)點(diǎn)擊絕對(duì)定位元素的時(shí)候，下面的元素雖然被遮蓋茴丰，但也被觸發(fā)了达皿。
A: 原因是：touchstart 早于 touchend 早于click天吓。 亦即click的觸發(fā)是有延遲的，這個(gè)時(shí)間大概在300ms左右峦椰，也就是說我們tap觸發(fā)之后蒙層隱藏龄寞， 此時(shí) click還沒有觸發(fā)，300ms之后由于蒙層隱藏汤功，我們的click觸發(fā)到了下面的a鏈接上物邑。
解決方案：
（1）盡量都使用touch事件來替換click事件。例如用touchend事件(推薦)滔金。
（2）用fastclick色解，https://github.com/ftlabs/fastclick
（3）用preventDefault阻止a標(biāo)簽的click
（4）延遲一定的時(shí)間(300ms+)來處理事件 （不推薦）
（5）以上一般都能解決，實(shí)在不行就換成click事件餐茵。
關(guān)于 iOS 系統(tǒng)中科阎，中文輸入法輸入英文時(shí)，字母之間可能會(huì)出現(xiàn)一個(gè)六分之一空格
Q: 如題
A: 解決方案：通過正則替換
this.value = this.value.replace(/\u2006/g, '');
Retina屏的1px邊框
Q: 如題
A: 解決方案：
Element{
border-width: thin;
}
