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

  • 相关阅读:
    CQUOJ 10819 MUH and House of Cards
    CQUOJ 9920 Ladder
    CQUOJ 9906 Little Girl and Maximum XOR
    CQUOJ 10672 Kolya and Tandem Repeat
    CQUOJ 9711 Primes on Interval
    指针试水
    Another test
    Test
    二分图匹配的重要概念以及匈牙利算法
    二分图最大匹配
  • 原文地址:https://www.cnblogs.com/alan2kat/p/7446266.html
Copyright © 2011-2022 走看看