ios10 safari 的坑！

| 导语 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要配合使用，才会正常。。

 

个人原创，未经允许，禁止转载！