移動端常見bug彙總002

前言

上一篇以後我從各個小夥伴那裏收集到了第二波移動端常見的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: 解決方案： 一、可在其子元素中統一添加和其相同的屬性，具體以下：

<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>
複製代碼

二、在其元素中添加以下屬性： -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;
}
複製代碼