移动端兼容问题
# 1.flex 布局 justify-content: end；不生效问题
# 原因
flex-end和end效果一样，但是兼容性flex-end更好 end ios部分版本不兼容，部分老浏览器不兼容
# 解决
flex 布局 justify-content: flex-end；
# 2.ios右滑返回，页面卡顿、反应慢
# 原因
返回页面中，如果返回页面时有复杂逻辑，或者dom重绘多次，会导致卡顿
# 解决
给指定元素（dom重绘频繁）设置css
transform: translate3d(0, 0, 0);
利用 GPU 加速渲染，速度就快了
# 3.移动端ios 单选框radio点击圆点不触发事件问题解决
# 原因
ios移动端radio 点击背景可以触发事件，点击圆点或者文字不触发事件，点不动 可能是ios不兼容问题
# 解决思路：
让圆点和文字点击事件不生效，点击时，直接点击下方的元素就好了 给圆点元素添加点击穿透属性：pointer-events: none 就好了
/deep/ .el-radio__input {
pointer-events: none;
}
/deep/ .el-radio__label {
pointer-events: none;
}
/deep/ .el-radio__inner {
pointer-events: none;
}
/deep/ .el-radio__original {
pointer-events: none;
}
2
3
4
5
6
7
8
9
10
11
12
# 4.fastclick 解决移动端点击2次不成功
# fastclick
FastClick是专门未解决移动端浏览器300ms点击延迟和点击穿透问题所开发的一个轻量级的库。FastClick实现原理是在检测到touchend事件的时候，会通过DOM自定义事件立即发出模拟一个click事件，并把浏览器在300ms之后的click事件阻止掉。
# 点击穿透问题
说完移动端点击300ms延迟的问题，还不得不提一下移动端点击穿透的问题。可能有人会想，既然click点击有300ms的延迟，那对于触摸屏，我们直接监听touchstart事件不就好了吗？ 使用touchstart去代替click事件有两个不好的地方。 第一：touchstart是手指触摸屏幕就触发，有时候用户只是想滑动屏幕，却触发了touchstart事件，这不是我们想要的结果； 第二：使用touchstart事件在某些场景下可能会出现点击穿透的现象。
什么是点击穿透？ 假如页面上有两个元素A和B。B元素在A元素之上。我们在B元素的touchstart事件上注册了一个回调函数，该回调函数的作用是隐藏B元素。我们发现，当我们点击B元素，B元素被隐藏了，随后，A元素触发了click事件。
这是因为在移动端浏览器，事件执行的顺序是touchstart > touchend > click。而click事件有300ms的延迟，当touchstart事件把B元素隐藏之后，隔了300ms，浏览器触发了click事件，但是此时B元素不见了，所以该事件被派发到了A元素身上。如果A元素是一个链接，那此时页面就会意外地跳转。