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

原文地址:https://www.cnblogs.com/alan2kat/p/7446266.html