在之前做的一个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. vue显示富文本

    来源:https://segmentfault.com/q/1010000013952512 用  v-html 属性解决

  2. 前端日期时间处理建议使用Momen

    使用方法 下载: http://momentjs.cn/downloads/moment.js 多语言版本:http://momentjs.cn/downloads/moment-with-local ...

  3. [Qt]执行cmd命令

    要加 /c 参数 QProcess p; p.start("cmd", QStringList()<<"/c"<<"ping ...

  4. Unity 极简UI框架

    写ui的时候一般追求控制逻辑和显示逻辑分离,经典的类似于MVC,其余大多都是这个模式的衍生,实际上书写的时候M是在整个游戏的底层,我更倾向于将它称之为D(Data)而不是M(Model),而C(Ctr ...

  5. java中的Atomic类

    文章目录 问题背景 Lock 使用Atomic java中的Atomic类 问题背景 在多线程环境中,我们最常遇到的问题就是变量的值进行同步.因为变量需要在多线程中进行共享,所以我们必须需要采用一定的 ...

  6. 电子书下载：C# Database Basics

    下载: http://download.csdn.net/detail/maxwoods/4089269

  7. 图论--树的重心（DFS） 模板

    const int maxn=500005; int tot=0,n; int ans,size; int sx[maxn],head[maxn]; int vis[maxn]; struct edg ...

  8. python基础入门教程（一条龙服务）

    一.语言基础 01-1 计算机系统 解释器下载 变量   小整数池 01-2 垃圾回收机制 02 数据类型 运算符(解压赋值等) 03 流程控制 if while for 04 整形 字符串 列表 0 ...

  9. Servlet --启动时创建、配置url、ServlectContext、初始化参数、获取资源

    servlet的版本的区别 2.5版本, Servlet的配置只支持在xml文件中的配置 3.0版本: Servlet的配置支持在xml文件中的配置, 也可以使用注解的方式, 默认使用注解 让服务器在 ...

  10. 面试被问了三次的http状态码到底有什么

    面试被问了三次的http状态码到底有什么 想想很多人面试都会有被问到http的状态码的经历,我也是经历了三面,每次都有提及这个问题.今天就来细致的讨论一下HTTP的状态码,如有不足,欢迎留言交流: H ...