【杂谈】小记一个ios11的bug

  前段时间,除了apple发布了新的硬件之外,同步还发布了新的操作系统,IOS11,当大家都将注意力聚焦在那个奇怪的刘海该如何适配的时候,笔者的项目在适配IOS11却出现了其他的问题。

  众所周知,IOS在滚动的时候是不能执行js的,这虽然是它内部的实现导致的,也为了解决这一问题,它特地推出的position:sticky属性,来兼容一些对动态设置fixed的场景,不过,当笔者的测试机升级到了IOS11的时候,一切又不一样了:    

  在ios11上打开滚动以上的页面(如果看不到效果可以访问这个链接),会发现页面上的fixed的button如果滚动得过快则会消失,当滚动停止之后又会再次出现,一个非常奇怪的问题,经过笔者和团队的小伙伴的多方调试参考,发现主流的解决方案有两种:

  1、直接避免用浏览器的滚动事件,完全使用touch事件模拟滚动,也就是这篇文章所介绍的;

  2、另一种就比较有趣了,能够在改动比较小的情况下修复这个IOS11的这个bug,请看这个链接

  其实原理很简单,笔者经过一些调试发现,只要滚动的元素用的不是window的滚动条,且fixed的元素不在滚动元素内部,就能够比较方便的规避IOS11的这个缺陷:

overflow: auto;
-webkit-overflow-scrolling: touch;    
height: 100vh;

  核心代码就以上的3行,目的就是构造一个和body一样的容纳滚动条的容器,当然,由于这样设置之后,ios下的滚动体验比较差,还需要加上一个第二行的那句hack,相关文章可参考这里,这样,就在最小改动的基础上,保证了fixed的元素能够正常的显示。

  虽然大体上解决了滚动的问题,不过由于ios的一些特殊机制,笔者发现,实际使用上即使是第二种方案也有一定的缺陷(不使用window的滚动条会导致在容器滚动的时候会转移焦点,然后再一次滚动外层的时候焦点又会再一次转移,导致再想继续滚动内部滚动条的话会产生一些额外操作,使用上最好避免有内外都要触发滚动事件的情况)。

  简单总结一下,2017年即将过去,虽然大圈子内对于适配新机器刘海的情况给了很多的解决方案,但是当真正落实到具体问题的时候,笔者发现。。硕大的前端圈子竟然毫无声响,反而是native的同学已经碰到了很多类似的问题,并开展了热烈的讨论。。这也是值得人深思的问题。

posted @ 2017-10-17 14:59  小白电猫  阅读(2342)  评论(0编辑  收藏  举报