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

个人原创,未经允许,禁止转载!