在之前做的一个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. [Qt] 通过socket将另一个程序的某个窗口调到最前端

    @ // THIS IS A HACK: // from QT documentation: // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...

  2. 理解分布式一致性:Paxos协议之Generalized Paxos & Byzantine Paxos

    理解分布式一致性:Paxos协议之Generalized Paxos & Byzantine Paxos Generalized Paxos Byzantine Paxos Byzantine ...

  3. CSS样式3

    1.positon:fixed 可以实现网页浏览器上的返回顶部的功能. positon:fixed 表示将当前div块固定在页面的某一个位置(默认为左上角). <!DOCTYPE html> ...

  4. (原創) 如何在Nios II顯示8位數的七段顯示器? (SOC) (Nios II) (SOPC Builder) (DE2-70)

    Abstract本文討論如何在Nios II控制8位數的七段顯示器. Introduction使用環境:Quartus II 8.0 + Nios II EDS 8.0 + DE2-70 (Cyclo ...

  5. usermod，用户密码管理，mkpasswd命令

    passwd是更改用户密码的文件,如果在root下,我们可以直接输入这个命令更改密码[root@localhost ~]# passwd更改用户 root 的密码 .新的 密码:如果想更改其他用户的密 ...

  6. CentOS联网问题

    CentOS 7安装好了之后,默认是没有自动联网的,每次启动系统后,之前都是要用到的时候手动联网,最近喜欢用无界面的方式登录系统,所以联网显得比较麻烦. 为了解决这个麻烦,必须让系统启动的时候就自动连 ...

  7. Naigos install pnp4nagios 绘图插件

    原文地址:http://www.cnblogs.com/caoguo/p/5022230.html vim /etc/httpd/conf/httpd.conf <Directory " ...

  8. win10 安装Maven

    1.将apache-maven-3.0.5-bin.zip解压到指定目录(最好不要有中文字符) 2.配MAVEN_HOME 3.验证是否安装成功  代开cmd窗口  mvn -v 4.修改本地仓库位置 ...

  9. andorid jar/库源码解析之okio

    目录:andorid jar/库源码解析 Okio: 作用: 说白了,就是一个IO库,基于java原生io.来进行操作,内部做了优化,简洁,高效.所以受到了一部分人的喜欢和使用 栗子: 读写文件. p ...

  10. D. Sequence Sorting dp

    D. Sequence Sorting 题目大意:给你一个序列,有一种操作就是对所有相同的数可以挪到最前面,也可以挪到最后面,问最少操作次数. 首先,对于很多个相同的数,可以缩成两个位置,一个是就是这 ...