在之前做的一个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. js前端加密，php后端解密（crypto-js，openssl_decrypt）

    来源:https://blog.csdn.net/morninghapppy/article/details/79044026 案例:https://blog.csdn.net/zhihua_w/ar ...

  2. Win10 及 Google 浏览器显示界面异常

    win10 和 google 界面显示异常 win10 个别 ui 组件花屏,google 界面直接黑屏 解决方式 更新集成显卡或者重装显卡驱动,最好使用 驱动人生 !!!

  3. gitlab环境部署

    一:配置主机名 [root@localhost ~]# hostname gitlab[root@localhost ~]# bash 二:安装依赖包 [root@gitlab ~]# yum -y ...

  4. Mac自带编码转换工具iconv

    iconv --help Usage: iconv [OPTION...] [-f ENCODING] [-t ENCODING] [INPUTFILE...] or: iconv -l Conver ...

  5. HTML模版组件

    1.介绍 BootStrap (最好看的) css js [x] 学习 BootStrap 规则 jQueryUI (美观一般,偏后台.*) css js [x] 学习 jQueryUI 规则 Eas ...

  6. IT服务，共享经济的下一个风口？

    前两天,在上千名CIO参加.释放10亿采购需求的2017华南CIO大会暨信息技术交易会上,一款"一站式IT工程师共享平台"成为大会关注焦点--这就是神州数码旗下的神州邦邦. 其实最 ...

  7. HDU 1159.Common Subsequence【动态规划DP】

    Problem Description A subsequence of a given sequence is the given sequence with some elements (poss ...

  8. 洛谷 P1352 没有上司的舞会(树形 DP)

    题目描述 某大学有N个职员,编号为1~N.他们之间有从属关系,也就是说他们的关系就像一棵以校长为根的树,父结点就是子结点的直接上司.现在有个周年庆宴会,宴会每邀请来一个职员都会增加一定的快乐指数Ri, ...

  9. badboy 录制脚本

    第一步:介绍badboy工具 1.1: 页面功能分析: 1. 界面视图,模拟浏览器,能够进行操作 2. 需要录制脚本的URL 3. 点击运行URL 4. Summary:运行的各指标,响应时间,成功事 ...

  10. 一键运行CIS安全扫描，集群安全无忧！

    CIS安全扫描是Rancher 2.4推出的其中一个重磅功能,旨在帮助用户快速.有效地加强集群的安全性.本文将详细介绍CIS安全扫描这一功能,包含详细的操作demo. 本文来自Rancher Labs ...