在之前做的一个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. Python带你做个愉快的"动森"玩家! (超简单代码)

    最近Switch上的<动物森友会>可谓是炙手可热,它几乎算是任天堂版的<模拟人生>了,它的最新游戏<集合啦!动物森友会>(以下称“动森”)在发售后,取得了不错的媒体 ...

  2. zabbix自动监控钉钉报警

    钉钉报警 一:设置钉钉机器人  二:zabbix服务器server端配置 1.修改zabbix_server.conf文件 [root@server ~]# vim /usr/local/zabbix ...

  3. 李宏毅机器学习--PM2.5预测

    一.说明 给定训练集train.csv,要求根据前9个小时的空气监测情况预测第10个小时的PM2.5含量. 训练集介绍: (1).CSV文件,包含台湾丰原地区240天的气象观测资料(取每个月前20天的 ...

  4. QML-密码管理器

    Intro 年初刚学Qml时写的密码管理器.用到Socket通信.AES加密等.UI采用Material Design,并实现了Android App的一些常见基本功能,如下拉刷新.弹出提示.再按一次 ...

  5. Javascript中的string类型使用UTF-16编码

    2019独角兽企业重金招聘Python工程师标准>>> 在JavaScript中,所有的string类型(或者被称为DOMString)都是使用UTF-16编码的. MDN DOMS ...

  6. Gartner:2016 Q2全球服务器市场,中国再度成为亮点

    对于IT产品供应商来说,Gartner.IDC等第三方分析机构市场调研报告无疑是一次"中考",成绩优异的论功行赏,迎接鲜花和掌声:差强人意,批斗会将是不可避免的,接下来加班加点,力 ...

  7. 解决Chrome插件安装时出现的“程序包无效”问题

    问题原因,新版的插件头部文件的修改,导致旧版的插件包无法使用,解决方式:解压. 1.把下载后的.crx扩展名的离线Chrome插件的文件扩展名改成.zip或者.rar(如果看不到Chrome插件的扩展 ...

  8. 数学--数论--整除分块(巨TM详细,学不会,你来打我)

    1.概念 从一道例题说起 在介绍整除分块之前,我们先来看一道算数题:已知正整数n,求∑i=1n⌊ni⌋已知正整数n,求∑i=1n⌊ni⌋在介绍整除分块之前,我们先来看一道算数题: 已知正整数n,求∑i ...

  9. 2019 ICPC 南京网络赛 H-Holy Grail

    As the current heir of a wizarding family with a long history,unfortunately, you find yourself force ...

  10. flask完成前后端分离实例

    需求:通过页面点击完成简单的投票系统功能. 相关文件: 设计思路: 1.前端:提供可以投票的入口.查询的入口.(前端不做数据处理,只做展示) 使用<a>  </a> 完成超链接 ...