在之前做的一个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. XSS跨站脚本攻击学习笔记(pikachu)

    颓废了几天,该好好努力了. XSS概述 XSS漏洞是web漏洞中危害较大的漏洞,是一种发生在web前端的漏洞,所以危害的对象也主要是前端用户,XSS可以用来进行钓鱼攻击,前端js挖矿,获取用户cook ...

  2. 获取 ProgramData 之类的环境变量(文件夹路径)的值

    GetEnvironmentVariable Recognized Environment Variables https://docs.microsoft.com/en-us/windows/dep ...

  3. 【linux题目】第三关

    1. 解释下什么是GPL,GNU,自由软件? 2. 如何选择Linux操作系统版本? 3. 安装系统时如何给Linux操作系统分区? 4. 描述Linux系统的启动过程? 5. 简要说出20个Linu ...

  4. 对话Roadstar投资人:一家自动驾驶公司之死(三) ...

    11. Roadstar 如何收场? 雷锋网:你觉得 Roadstar 造成今天这样的局面,是什么导致的? 投资人代表 1:刚才我们也数次表达了,在每个人身上,可能每个人的诉求,不能达到同步,与公司的 ...

  5. Mysql使用规范及建议

    MySQL数据库使用规范一.建表规约1.[强制]表达是与否概念的字段,必须使用is_xxx的方式命名,数据类型是unsigned tinyint (1表示是,0表示否) 说明:任何字段如果为非负数,必 ...

  6. 瑞银预计小扎的十年规划可获大回报 上调Facebook股票目标价

    瑞银认为马克·扎克伯格(Mark Zuckerberg)为Facebook定制的十年规划将带来丰厚回报,它已将Facebook股票的目标价由之前的155美元上调至165美元. Facebook首席执行 ...

  7. RxJava2源码解析(二)

    title: RxJava2源码解析(二) categories: 源码解析 tags: 源码解析 rxJava2 前言 本篇主要解析RxJava的线程切换的原理实现 subscribeOn 首先, ...

  8. JS中switch语句做选择时为什么可以不用break?

    在JavaScript中,switch语句相比其他语言并没有特殊之处. 在使用时,我们要注意每个分支后都应加一条break语句,否则后面的分支仍然会执行.实际程序中,我发现有时没用break语句,仍然 ...

  9. .net core 基于Dapper 的分库分表开源框架(core-data)

    一.前言 感觉很久没写文章了,最近也比较忙,写的相对比较少,抽空分享基于Dapper 的分库分表开源框架core-data的强大功能,更好的提高开发过程中的效率: 在数据库的数据日积月累的积累下,业务 ...

  10. 题目分享I

    题意:2*n的地面,q次操作,每次操作将地面翻转,若该地是地面那翻转就成熔岩,如果是熔岩那翻转就成地面,熔岩人不能走,问人是否能从1,1走到2,n (ps:1,1和2,n不会在翻转的范围内,n,q≤1 ...