| 导语 ios10 的safari，又给前端开发者挖坑了。。测试验证此问题只出现在ios10 safari中。想早点知道结论的，可以直接看最后一个结论~因为，解决过程不重要！
个人原创，未经允许，禁止转载！
本文以项目为基础来谈坑~
一、我们的项目-H5导航
展示一下我们的项目，注意图中红框区域，是有手势滑动效果的区域(右图是滑动到一半的效果，正常情况下，滑动到这个位置松手的话，是会自动设置展开的)。咦，看起来很正常啊。对，现在是正常的
二、异常情况
But，ios10 safari下，显示如下惊人的效果
：
三、解决过程：
第一步：借来mac
，连上safari，调试。（如果不知道怎么调试，欢迎留言...）
第二步：打log。过程太多，省略。结果就是：逻辑完全正常啊！
第三步：第二步失败了，那就用排除法吧，先把可能影响的因素（手势逻辑-原生js写的、禁用原生touchmove事件、transform动画）一一排除。结果是：
注：为什么会考虑到transform动画有影响呢？因为底图遇到过这个问题，已经确定ios10 safari下是有transform的问题了~
| 影响因素 | 结论 |
| 原生手势动画 | 完全无影响，把代码注释之后，在ios10 safari中依然可以随手势滑动 |
| 禁用touchmove事件 | ios10 safari中，竟然还是能滑动。这不科学啊！ |
| transform动画 | 删掉css3动画后，也是完全不能阻止dom跟随手指滑动 |
第四步：第三步虽然失败了，可是给我了一个启发，难道是ios10 禁用touchmove是失效的？？所以，这时候，我就只写了个禁用touchmove的demo。但是，在手机上一测试。。我的假设又错了。。
第五步：一定有哪里不对。。突然之间，看到了这个滑动区域的css样式，写了height，就鬼使神差的取消了这个样式，然后去滑动DOM，发现，竟然不错位了。。OMG。。
第六步：改写代码。但是改写过程中，发现使用translateY时，要写高度才行。。问题终于找到了
bug修复前的代码：
css：
.route-plan {
/*其他css*/
height: 100%;
}
javascript：
滑动过程中：
self.planDiv.style.webkitTransform = 'translateY(' + nowPageY + 'px)';
松开手指，最大化页面时：
self.planDiv.style.webkitTransform = 'translateY(0px)';
松开手指，最小化页面时：
// 跟此bug不相关的逻辑
bug修复后的代码：
css：
.route-plan {
/*其他css*/
height: 149px;
}
javascript：
滑动过程中：
self.planDiv.style.height = '100%';
self.planDiv.style.webkitTransform = 'translateY(' + nowPageY + 'px)';
松开手指，最大化页面时：
self.planDiv.style.height = '100%'; self.planDiv.style.webkitTransform = 'translateY(0px)';
松开手指，最小化页面时：
self.planDiv.style.height = '149px'; self.planDiv.style.webkitTransform = 'translateY(0px)';
这3种情况，去掉任何一个的高度或者transform代码，就会出现错乱情况。。
至此，bug完美解决~
四、结论：
ios10 safari中，transform : 'translateY(0px)' 和 height要配合使用，才会正常。。
个人原创，未经允许，禁止转载！