前言
上一篇之后我从各个小伙伴那里收集到了第二波移动端常见的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;
}
网友评论