ios10 safari 的坑！

| 导语 ios10 的safari，又给前端开发者挖坑了。。测试验证此问题只出如今ios10 safari中。想早点知道结论的，能够直接看最后一个结论~由于，解决过程不重要！

 

我的原创，未经容许，禁止转载！

本文以项目为基础来谈坑~

1、咱们的项目-H5导航

展现一下咱们的项目，注意图中红框区域，是有手势滑动效果的区域(右图是滑动到一半的效果，正常状况下，滑动到这个位置松手的话，是会自动设置展开的)。咦，看起来很正常啊。对，如今是正常的

 

2、异常状况

But，ios10 safari下，显示以下惊人的效果：

 

3、解决过程：

第一步：借来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完美解决~

 

4、结论：

ios10 safari中，transform : 'translateY(0px)' 和 height要配合使用，才会正常。。

 

我的原创，未经容许，禁止转载！