关于碰到在苹果手机上的兼容相关问题【部分】

记笔记，免忘记！方便之后自己碰到相同问题的时候查阅！后面碰到其它会补充。语言组织能力可能不太好，请各大神指正！

一：:hover在ios上无效（包含但不限于:active :focus）等

//解决方案一：js绑定事件
document.body.addEventListener('touchstart',function(){});
//解决方案一：body添加ontouchstart

二：苹果手机下拉上拉滚动卡顿等问题

解决方案：在body的样式上加入以下样式
body {
-webkit-overflow-scrolling: touch; //但是这个样式有时候会影响z-index失效
overflow-scrolling: touch;
}

三：多个position:fixed导致层级关系失效

//第一种情况
因为我是body中加了iOS的弹性滑动属性导致出现的层级z-index失效，故我的解决方案是注释该样式后问题解决

//第二种情况
transform导致的z-index失效

//其它的暂时未知道

transform

四：click等事件在ios上无效问题

//方法一：
将 click 事件直接绑定到目标​元素（​​即 .target）上

//方法二：
将目标​元素换成  或者 button 等可点击的​元素

//方法三：（推荐）
​将 click 事件委托到​​​​​非 document 或 body 的​​父级元素上

//方法四：（推荐）
​给​目标元素加一条样式规则 cursor: pointer

//方法五：
使用touch事件替换click事件，iOS 系统下默认的 click 事件会有300毫秒的延迟，可以使用 fastclick 来消除这个延迟。