在之前做的一个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

ios中fixed元素在滚动布局中的延时渲染问题的更多相关文章

  1. duilib中的V和H布局中滚动条问题

    转自博客:http://blog.csdn.net/damingg/article/details/41149037 首先看一段xml代码 [html] view plaincopy <?xml ...

  2. Python:将数组中的元素导出到变量中 (unpacking)

    问题 你需要将数组(list)或元组(tuple)中的元素导出到N个变量中. 解决方案 任何序列都可以通过简单的变量赋值方式将其元素分配到对应的变量中,唯一的要求就是变量的数量和结构需要和序列中的结构 ...

  3. js中迭代元素特性与DOM中的DocumentFragment类型 笔记

    JS中迭代元素特性 在需要将DOM结构序列化为XML或者HTML字符串时,多数都会涉及遍历元素的特性,这个时候attributes属性就可以派上用场. 以下代码展示了如何迭代元素的每一个特性,然后将他 ...

  4. js获取iframe中的元素以及在iframe中获取父级的元素(包括iframe中不存在name和id的情况)

      第一种情况:iframe中不存在name和id的方法:(通过contentWindow获取) var iframe = document.getElementsByTagName('iframe' ...

  5. O(1)时间复杂度实现入栈、出栈、获得栈中最小元素、获得栈中最大元素(转)

    题目要求:定义栈的数据结构,添加min().max()函数(动态获取当前状态栈中的最小元素.最大元素),要求push().pop().min().max()的时间复杂度都是O(1). 思路解析:根据栈 ...

  6. 删除列表中重复元素以及求list中元素个数

    Python 去除列表中重复的元素 来自比较容易记忆的是用内置的set l1 = ['b','c','d','b','c','a','a'] l2 = list(set(l1)) print l2 还 ...

  7. css中伪元素before或after中content的特殊用法attr【转】

    [原文]https://segmentfault.com/a/1190000002750033 CSS中主要的伪元素有四个:before/after/first-letter/first-line,在 ...

  8. css中伪元素before或after中content的特殊用法attr

    html代码如下: <div class="haorooms"> <span data-haorooms="haorooms鼠标效果tips-纯css& ...

  9. ios下,微信小程序scrollview组件中的fixed元素抖得和帕金森病人一样

    问题现象 这个问题是最近在优化小程序代码时发现的. 在ios环境下,微信小程序的scrollview组件包裹着一个position:fixed的view. 当在scrollview组件上滑动时,这个v ...

随机推荐

  1. tp5--开启与关闭调试模式

    https://www.cnblogs.com/finalanddistance/p/8906000.html TP5 显示错误信息   在TP5中,我们运行的代码有错误无法执行时,只显示页面错误,而 ...

  2. docker 搭建一个wordpress 博客系统(4)

    安装lnmp ()下载镜像 [root@server ~]# docker pull mysql:latest #下载mysql镜像 [root@server ~]# docker pull rich ...

  3. 创建线程的方式三:实现Callable接口-----JDK5.0 新增

    package com.yhqtv.java2; /* * 创建线程的方式三:实现Callable接口-----JDK5.0 新增 * * 如何理解实现Callable接口的方式创建多线程比实现Run ...

  4. zookeeper笔记(二)

    title: zookeeper笔记(二) zookeeper ALC权限控制 getAcl path 可以查看某个node的权限 设置权限: 2. world方式 setAcl <path&g ...

  5. (转)对 Linux 新手非常有用的 20 个命令

    你打算从Windows换到Linux上来,还是你刚好换到Linux上来?哎哟!!!我说什么呢,是什么原因你就出现在我的世界里了.从我以往的经验来说,当我刚使用Linux,命令,终端啊什么的,吓了我一跳 ...

  6. 标准库shelve

    shelve模块是一个简单的k,v将内存数据通过文件持久化的模块,可以持久化任何pickle可支持的python数据格式. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 ...

  7. 狄慧201771010104《面向对象程序设计(java)》第十六周学习总结

    实验十六  线程技术 实验时间 2017-12-8 一.知识点总结: 1.程序与进程的概念 ‐程序是一段静态的代码,它是应用程序执行的蓝本. ‐进程是程序的一次动态执行,它对应了从代码加载.执行至执行 ...

  8. Web全栈AngularJS

    百度云盘下载 AngularJS是人类首个大规模使用的MVC框架,能够帮助程序员将绝大部分精力集中在核心业务逻辑上,从而大幅提高开发效率. 阶段2:Controller Controller是Angu ...

  9. Error: Can't find Python executable "G:\Python27"

    错误如题,node-gyp官网介绍不够详细,应设置python.exe的具体绝对路径,如下所示: npm config set python G:\Python27\python.exe 转载于:ht ...

  10. matlab混合编程向导(vc,vb,.net...)

    一.matlab与vc混编  1.通过mcc将matlab的m文件转化为cpp,c文件或dll供vc调用:     这方面的实现推荐精华区Zosco和ljw总结的方法(x-6-1-4-3-1和2)  ...