webkit手机浏览器的一些bug汇总

日期解析

下面格式的时间字符串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，主要分为两种情况

1. 浏览器直接无法定位(错误事件中e.code为2),但本地应用的定位功能正常

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

1. 链接点击位置不正常(点击效果会出现在浮层下方元素上)

2. 浮层内容较多时可能需要实现元素内部滚动,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 原生浏览器