iOS最先响应屏幕反应。响应顺序依次为Touch——Media——Service——Core架构，当用户只要触摸接触了屏幕之后，系统就会最优先去处理屏幕显示也就是Touch这个层级，然后才是媒体（Media），服务（Service）以及Core架构。
所以说，当系统接收到Touch事件之后会优先响应，此时会暂停屏幕上包括js、css的渲染。这个时候不光是css动画不动了，哪怕页面没有加载完如果你手指头还停留在屏幕上那么页面也不会继续加载，直到你的手松开。
解决办法有两个，各有瑕疵：
不要使用 scroll 事件（此事件会被暂停），而是采用 touchmove（此事件会在用户触屏滚动的时候不断触发）。瑕疵是，在结束触屏后惯性滚动的时间里，touchmove 无法被触发了（scroll 当然也不行）；
基于上一种方法，在所有的 touchmove 事件中，强行 preventDefault 阻止掉事件，然后根据 event.pageY 来手工设置所滑动元素的 scrollTop 值。当然，这样一来就没有了惯性滚动。
你也可以在 touchend 之后，手工模拟惯性滚动，计算速度以及速度衰减，可以参考各种各样的滚动插件。
还记得许多年前，我们为一个元素添加有一个动画class之后，你还在用settimeout来延迟下一个动作,这么做过时啦。哪怎么做呢。
不是添加了一个类么，哪动画结束以后来执行这个动作呗。
哪么动画有两种，还是要区别对待的。
1.animation
2.transition
-webkit-animation动画其实有三个事件：
开始事件 webkitAnimationStart
结束事件 webkitAnimationEnd
重复运动事件 webkitAnimationIteration
嗯 对 就是这么简单 后面的实际用例我会附上
待更新中。。。
这篇文章写出来以后，朋友反馈过来有兼容性问题。
iOS9一下和安卓4.4一下是不支持的。
因为现在大多数项目技术栈是vue,这里我就推荐使用vue的过渡钩子函数beforeLeave来解决这个问题，关于vue过渡常见的用法和解惑我会单独开一篇文章去写这个东西。
其他比较好的解决方案还是使用setTimeout去解决这个问题。
https://developer.mozilla.org/en-US/docs/Web/Events/transitionend
注意：每个启用TransitionCSS属性的分别对应独立的transitionend事件
1.position:fixed；
ios下fixed元素容易定位出错，软键盘弹出时，影响fixed元素定位
android下fixed表现要比iOS更好，软键盘弹出时，不会影响fixed元素定位
ios4下不支持position:fixed
解决方案： 可用iScroll插件解决这个问题
2.安装复制功能的插件，
因为手机版本高低原因，会出现兼容性问题在复制按钮的class上增加 needsclick ,j解决在手机上的兼容问题class="copy needsclick"
3.IOS移动端click事件300ms的延迟相应
移动设备上的web网页是有300ms延迟的，往往会造成按钮点击延迟甚至是点击失效。
这是由于区分单机事件和双击屏幕缩放的 历史原因 造成的。
解决方式：
fastclick可以解决在手机上点击事件的300ms延迟
zepto的touch模块，tap事件也是为了解决在click的延迟问题
触摸屏的相应顺序为touchstart-->touchmove-->touchend-->click，也可以通过绑定ontouchstart事件，加快事件的响应，解决300ms的延迟问题
4.ios的一些情况下对非可点击元素（label，span）监听click事件，iso下不会触发，css增加cursor：pointer就搞定了。
5..h5底部输入框被键盘遮挡问题
h5页面有个很蛋疼的问题就是，当输入框在最底部，点击软键盘后输入框会被遮挡。可采用如下方式解决
var oHeight = $(document).height()//浏览器当前的高度 $(window).resize(function(){ if($(document).height() <oHeight){ $("#footer").css("position","static")}else{ $("#footer").css("position","absolute")} })
6..消除 transition 闪屏
-webkit-transform-style: preserve-3d/*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/ -webkit-backface-visibility: hidden/*(设置进行转换的元素的背面在面对用户时是否可见：隐藏)*/
7.iOS 系统中文输入法输入英文时，字母之间可能会出现一个六分之一空格
可以通过正则去掉 this.value = this.value.replace(/\u2006/g, '')
8.禁止ios和android用户选中文字
-webkit-user-select:none
9.CSS动画页面闪白,动画卡顿
解决方法: 1.尽可能地使用合成属性transform和opacity来设计CSS3动画，不使用position的left和top来定位 2.开启硬件加速
-webkit-transform: translate3d(0, 0, 0)-moz-transform: translate3d(0, 0, 0)-ms-transform: translate3d(0, 0, 0)transform: translate3d(0, 0, 0)
10..阻止旋转屏幕时自动调整字体大小
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none}
11。Input 的placeholder会出现文本位置偏上的情况
input 的placeholder会出现文本位置偏上的情况：PC端设置line-height等于height能够对齐，而移动端仍然是偏上，解决是设置line-height：normal
12 往返缓存问题
点击浏览器的回退，有时候不会自动执行js，特别是在mobilesafari中。这与往返缓存(bfcache)有关系。
解决方法 ：window.onunload = function(){}
13.calc的兼容性处理
CSS3中的calc变量在iOS6浏览器中必须加-webkit-前缀，目前的FF浏览器已经无需-moz-前缀。
Android浏览器目前仍然不支持calc，所以要在之前增加一个保守尺寸：
div { width: 95%width: -webkit-calc(100% - 50px)width: calc(100% - 50px)}
14在移动端修改难看的点击的高亮效果，iOS和安卓下都有效：
* {-webkit-tap-highlight-color:rgba(0,0,0,0)}
15。overflow: autoIOS手机滚动卡顿
-webkit-overflow-scrolling: touch//有回弹效果
