2015-08-20

移动端的一些坑

总结了移动端的一些坑，大部分搬砖自腾讯的tgideas…

border-radius失效
- 问题描述：border-radius失效
- 环境与频率：Android 2.3.x
- 解决方案：使用一个较大的值例如9999px设置border-radius

placeholder文字偏上
- 问题描述：placeholder属性设置的文字向上偏移的厉害
- 环境与频率：Android 4.x 部分机型
- 解决方案：line-height:normal;

position:fixed各系统的兼容性
- IOS：iOS5及以后版本都支持. iOS4及以下版本不支持，会当做static处理.
- android：
  1. Android 2.1 及以下版本不支持.
  2. Android 2.2 滚动过程中不保持fixed的位置，滚动完成后回到fixed的位置.
  3. Android 2.3 支持fixed, 但是要求页面禁止缩放.
  4. Android 3+ 支持fixed.
position fixed失效
- 问题描述：如果一个应用了css3 transform的元素里面包含fixed定位的元素，在webkit核心的浏览器下，该fixed定位的元素会失效，其实际定位效果类似绝对定位，会跟着滚动条的滚动而滚动！
- 环境与频率：ios
- 解决方案：避免在应用了css3 transform的元素内部嵌套fixed定位的元素。
webkit浏览器控件的默认样式
- 问题描述：webkit上的input,button,及select的默认样式可以通过以下代码禁用，然后自定义。
1
-webkit-appearance:none;
video标签脱离文档流
- 问题描述：video标签的父元素(祖辈元素)设置transform样式后，标签会脱离文档流
- 环境与频率：部分android机型
- 解决方案：避免使用transform，如果需要设置位移，可使用绝对定位加top/left代替
页面100%高度问题
- 问题描述：body设置100%高度后，在移动浏览器里面可能会被底部系统的导航栏挡住:
- 环境与频率：各移动浏览器经常出现
- 解决方案：利用JS重置文档元素的高度：
1
document.documentElement.style.height = window.innerHeight + 'px'

字体设置建议

1
2
3

	body {
        font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
}

使用border-image实现类似iOS7的1px底边

Android2.3.x keyframes动画问题
- 问题描述：animation动画不起作用
- 环境与频率：Android 2.3.x
- 解决方案：100%要留一帧空出来。在100%之前写一个最后值 99%那里写。2.3系统的动画才会动。
1
2
3
4
5
6
@-webkit-keyframes wave1{
0%{ opacity:0;}
8.33%{ opacity:.8;}
99%{opacity:1;}
100%{}/* 空的一帧 */
}
300ms点击延迟问题
- 问题描述：移动端点击有300ms响应延迟
- 环境与频率：各机型
- 解决方案：fastclick.js
Android2.3.x overflow失效
- 问题描述：在android2.3及以下系统版本的浏览器不支持overflow：scroll / auto，即在页面元素里面的内容如果超过了父元素或祖先元素的高度是无法滚动的
- 环境与频率：Android 2.3.x
- 解决方案：可以通过css3的transform来实现滚动，代表作：iscroll
伪类元素动画的兼容性
- 问题描述：::after,::before这些伪元素的animation动画存在兼容性能问题，应慎用。ios6.1及以下均不支持

非a标签点击事件失效

问题描述：上面的代码在ios下点击 span_1, span_2, dv_1 都没有弹出框。

	<span class="span_1">span_1</span>
<span class="span_2">span_2</span>
<div class="dv_1">dv_1</div>
<a href="javascript:;" class="a_1">a_1</a>
<script>
document.addEventListener('click', function(e) {
    alert('bind document e.target.id = '+e.target.id);
},false); 
</script>

* 环境与频率：ios

* 解决方案：在标签上加onclick属性

1
<span id="span_1" onclick="javascript:void(0)">span_1</span>

touchmove只执行一次
- 问题描述：在android里面，每一次滑动操作可能只会触发一次touchmove事件。一些依赖滚屏的交互逻辑因此变得难以实现。
- 环境与频率：android
- 解决方案：在touchstart事件回调里面阻止默认事件
gif动画的性能影响
- 问题描述：打开一个含有gif动画的页面，利用Chrome开发者工具timeline查看渲染情况,当页面没有做任何操作的时候，timeline中会重复出现：Rasterize, Paint, Composite Layers，而且gif越多性能消耗越大。
- 解决方案：避免使用gif动画，可利用css3动画、图片帧动画代替之。

GPU加速的性能影响

开启GPU加速的方法

1. -webkit-backface-visibility: hidden;
2. -webkit-transform: translate3d(0, 0, 0);
3. -webkit-transform-style: preserve-3d;
4. -webkit-transform: translateZ(0);
5. iframe浏览器默认是开启3d加速

结论：没开启GPU加速的拖拽操作，会频繁发生布局（layout）、Paint（绘制）；开启GPU加速后，布局、绘制后的图层会被缓存起来复用；这是为什么GPU加速的动画比普通动画顺畅的原因。
但是：图层的缓存会消耗内存，一个页面过多的元素使用GPU加速，性能同样会存在问题。GPU加速要根据项目需要适量使用。

box-shadow性能问题

1
2
3

性能消耗和阴影大小，作用元素大小，个数成正比。
偏移对性能影响不大。
如果阴影的透明度为0则性能没有影响。

使用建议：

1 2	大型元素的阴影可以考虑用图片代替减少阴影的使用，或降低数值。

input输入框有阴影
- 问题描述：input输入框有阴影，不希望它有阴影
- 环境与频率：ios
- 解决方案：background: #FFFFFF url(…/images/white.png);
调用搜索键盘
- 方法：input type=“search” 外面要套form
背景色溢出问题
- 问题描述：border-radius 和 background 同时设置会出现背景色溢出
- 环境与频率：android部分机型
- 解决方案：
1
2
background-clip:padding-box;
background-color:具体颜色
input输入框有阴影
- 问题描述：input输入框有阴影，不希望它有阴影
- 环境与频率：ios
- 解决方案：background: #FFFFFF url(…/images/white.png);