webkit手機瀏覽器的一些bug彙總

阿新 • • 發佈：2019-01-03

日期解析

下面格式的時間字串iOS(包含iOS7)不支援解析，android一直支援

Date.parse("2010-03-15 10:30:00");//會返回NAN

簡單的解決方案是

var arr = "2010-03-15 10:30:00".split(/[- :]/),
date = new Date(arr[0], arr[1]-1, arr[2], arr[3], arr[4], arr[5]);

fixed定位

android:

2.2+開始支援fixed定位，但需要把頁面縮放關閉

ios:

5.0+開始支援頁面縮放開啟之後fixed不會失效，但頁面縮放之後fixed失效

onscroll事件

ios:

在mobile safari下在頁面滑動時js程序會停止，所以onscroll事件也是在頁面停止滑動之後才會執行一次。

android

android下頁面滑動不會阻止js程序，但可能是效能問題，事件執行週期不穩定，甚至有時候也會出現滑動停止才會執行一次onscroll的情況

多點觸控

gesture

android 3.0之前不支援

touch

android上存在bug

:::javascript
window.addEventListener(‘touchstart’,function(e){
    console.log(e.touches.length)
},false);

touches陣列始終只有一個值，所以用touch事件模擬gesture也是不可行的

demo中body元素添加了touch事件，圖片添加了gesture事件

scroller

元素內部滾動(-webkit-scroll-touch)

目前只有ios5+支援(據說android4+支援，但測試後發現木有)

元素內部滾動，目前網上有不少解決方案，主要是通過scrollTop屬性或者translate模擬實現，比如iscroll4等，但大都存在以下問題。

a. 在android上滑動效果較差，特別是內部元素dom結構相對複雜時，都會出現無法滑動或者滑動很卡的情況

b. 更新內部元素內容時會出現頁面閃爍的情況，讓人非常不爽

scrollIntoView

很多android瀏覽器不支援這個方法，拿了一個android4.0的原生瀏覽器做測試，發現支援的也不好，但window.scrollTo屬性支援的都還不錯，可以選擇替代方案，先算出元素據頁面頂部的距離y，再使用window.scrollTo(0,y)來實現

地理定位

在一些android瀏覽器上存在bug，主要分為兩種情況

瀏覽器直接無法定位(錯誤事件中e.code為2),但本地應用的定位功能正常
一直顯示定位中(傳入的success和fail事件都不會執行)。所以定位時設定超時屬性是很有必要的

偽類

1.hover和active偽類都存在bug

2.設定了點選事件的元素在點選時會有一個陰影效果(-webkit-tap-highlight-color),這種點選效果在很多android機器上沒有，但android上的a元素點選有點選效果

螢幕旋轉

orientationchange從android2.2開始支援，但事件會在旋轉螢幕之前觸發，需要通過setTimeout去修復。

圓角邊框出現虛框

通過border-radius=width/2原理實現圓形容器時，在android下圓形邊框會出現齒形虛框

本地儲存

在混合App中(基於webview)，若使用localStorage或者webSQL儲存資料，資料是永久存在的(當更新程式或者程式被強制關閉時重新開啟程式資料都會存在)，但從ios5.1開始這個資料不再是永久的，它會被當作臨時資料，ios隨時可以刪除，而且不會出任何警告，所以ios5.1之後在HyBrid App中本地儲存功能只能通過phoneGap這些殼去呼叫原生的儲存介面實現。目前這個bug已在ios6中解決

浮層

在android上最好不要出現浮層，目前已發現以下bug

連結點選位置不正常(點選效果會出現在浮層下方元素上)
浮層內容較多時可能需要實現元素內部滾動,so……

touchend

這是一個非常噁心的bug，在一些andorid的機型中，發現很多時候輕微滑動時不觸發touchend事件

background-size

在android2.1上要加-webkit-字首，但是2.2之後去掉-webkit-字首才識別，所以要在兩個系統都支援的話需要把兩種都寫上

background:url(...) center center no-repeat;
backround-size:100% 100%;
-webkit-backround-size:100% 100%;

background-size有兩個比較有用的值:contain cover

這兩個屬性的作用是保持背景圖片比例不變，放大或縮小背景圖片 cover是保證鋪滿全螢幕，多餘的寬或者高被隱藏 contain是保證容器包含整個背景，比例較小的寬或者高會留白

.bc{
    width:320px;
    height:240px;
    background:#000         url(http://imgsrc.baidu.com/baike/pic/item/a044ad345982b2b72550766c31adcbef77099b4f.jpg) center center no-repeat;
    background-size:cover;
    /*-webkit-background-size:contain;*/
}

經測試，這兩個屬性值在android2.2+支援

ios 4.3.5上contain實現無bug，cover底部會出現留白 ios5+無bug

頁面閃動

高階版開發過程中有時候會出現頁面閃爍的情況，歸納有以下幾種可能

a.android下使用了translate而不是translate3d

b.url中多了#號(比如很多人鏈接當按鈕使用時href喜歡寫成#號，要杜絕這一點，全部寫成'javascript:;')。加個題外話，高階版中不要使用hash進行錨點定位，使用window.scrollTo(0,y)或者el.scrollTntoView()替代.

c.經常在旋屏的時候出現，這個一般是控制元件邏輯問題，比如導航欄控制元件，很多寫法是在orientationchange事件裡面重新算寬度，而螢幕旋轉過程中樣式也有一個預設變化，當兩者衝突時，會產生閃爍現象。

hashchange

android 2.2+才支援

JavaScript 中json屬性名不能為class

在IOS4.X系列中，當json屬性名為class的時候會出現奇怪的語法錯誤，如：

:::javascript
{
    class:'button'
}

input maxlength

android 2.1中input 元素不能加入maxlength 否則會出現無法輸入的情況，但textarea無此問題

Anroid 4.0.3系統發現，直接使用css(display,block),設定dom節點顯示狀態有時失效。但執行了getComputedStyle函式後，則不會出現此bug。推薦：直接使用kimi的show，hide方法

其它

iTouch4 iOS5.1 app的webview中，若在a元素的點選事件中修改其display屬性，會導致webview crash
小米3系統原生瀏覽器:浮層中使用kimi的tap事件時會產生穿透，click則不會。小米3中的chrome瀏覽器tap也不會穿透
部分原生android瀏覽器執行 JSON.parse(null )時會報js錯誤
部分Android上面瀏覽器動態插入link元素時不觸發load事件，這樣導致一些require實現lib(如seajs)無法正常工作，目前發現機型:ZTE U930 原生瀏覽器

webkit手機瀏覽器的一些bug彙總

日期解析

fixed定位

android:

ios:

onscroll事件

ios:

android

多點觸控

gesture

touch

scroller

scrollIntoView

地理定位

偽類

螢幕旋轉

圓角邊框出現虛框

本地儲存

浮層

touchend

background-size

頁面閃動

hashchange

JavaScript 中json屬性名不能為class

input maxlength

其它

相關推薦