zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    c++类中比较重要的几个函数
    rosbag使用方法
    2.urllib库的使用
    什么叫做API?
    1.爬虫基础
    正则表达式

    time模块
    random模块
    日志处理
  • 原文地址:https://www.cnblogs.com/alan2kat/p/7446266.html
Copyright © 2011-2022 走看看