ios中fixed元素在滚动布局中的延时渲染问题

在之前做的一个demo中，有个视图是内滚动的，里边有个bar用了fixed，不是fixed在最外层视图的顶部和底部，在微信/safari/chrome/其他浏览器app上都没出现问题。

然后今天，我把demo放在拉勾网的简历的一个链接中，在拉勾网app里面点开，发现一个问题：

上下滚动的时候，设置了position:fixed的元素，在ios的-webkit-overflow-scrolling:touch机制下，产生了fixed的元素跟随内容一起滚动的问题。

此时fixed元素的表现就和position:absolute；一样。

what the fuck？？？？

excuse me？？？？

what happen？？？？

这个问题我记得在前些年有人讨论过，以为是已经修复的问题。没想到今天在拉勾网中打开竟然会出现。然后我在其他手机和app上反复测试，只有拉勾网里点开会这样。

然后我做了个试验：

1.在内滚动容器里放一个fixed的小div1；

2.在内滚动容器外放一个fixed的小div2；

然后再手机上测试，结果：

在滚动时，div1发生跟随页面一起滚动的bug，而div2不会。

也就是说，虽然不知道是不是浏览器内核版本或者其他原因，但是,当fixed的元素不在内滚动容器内的时候，就不会受容器自身滚动效果的影响。

所以，以后除了规避fixed，也可以尝试将元素摘出滚动体外，以完成某些页面效果，如上下滑动时的伸缩/淡入淡出。

 

 

附上一些关于fixed问题的信息,难免有时效性，不过可作参考：

http://bradfrost.com/blog/mobile/fixed-position/

https://www.quirksmode.org/blog/archives/2010/12/the_fifth_posit.html

《解决Web移动端Fixed布局的方案（防止页面露底、overflow-scrolling、iOS下的一些细节处理》http://ju.outofmemory.cn/entry/261460