在之前做的一个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. PHP中的11个魔术方法

    1.__get.__set 这两个方法是为在类和他们的父类中没有声明的属性而设计的 __get( $property )       当调用一个未定义的属性时访问此方法__set( $property ...

  2. PHP使用token防止表单重复提交的方法

    本文实例讲述了PHP使用token防止表单重复提交的方法.分享给大家供大家参考,具体如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 2 ...

  3. Android：finish()与System.exit(0)之间的区别

    finish()与System.exit(0)都是用来退出.但是两者还是有一定的区别: finish是Activity的类,仅仅针对Activity,当调用finish()时,只是将活动推向后台,并没 ...

  4. js 实现淘宝放大镜功能，可更改配置参数 带完整版解析代码[magnifier.js]

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写淘宝放大镜效果 基本功能: 运 ...

  5. css之颜色表示法

    css之颜色表示法 十六进制颜色 所有浏览器都支持十六进制颜色值. 十六进制颜色是这样规定的:#RRGGBB,其中的 RR(红色).GG(绿色).BB(蓝色)十六进制整数规定了颜色的成分.所有值必须介 ...

  6. mac OS 安装配置 Tomcat

    Apache Tomcat官网 http://tomcat.apache.org/ 选择一个版本 本文以tomcat 9为例 选择Mac OS 对应的压缩包下载 把文件解压然后  在主用户里新建一个目 ...

  7. 移动App性能测评与优化1.4.4　多进程应用

    1.4.4 多进程应用 根据上一节中的描述,当一个进程结束后,它所占用的共享库内存将会被其他仍然使用该共享库的进程所分担,共享库消耗的物理内存并不会减少.实际上,对于所有共享使用了这个库的应用,Pss ...

  8. windows 7或以上系统的实用小工具，你知道么？

    今晚给大家介绍个实用的好工具,可以做简单的问题记录,再也不用截图加注释这么辛苦了····· 经测试,这东东在win7,2008 及2008R2里适用,也就是说,在win7以上的系统中才有.好了,下面直 ...

  9. Redis 服务搭建

    1.redis 简介 Redis 是完全开源免费的,遵守 BSD 协议,是一个高性能的 key-value 数据库. Redis 与其他 key - value 缓存产品有以下三个特点: Redis ...

  10. 【Layui__监听button】在form中监听按钮事件

    1. 前言 在使用form表单的按钮时,点击按钮总是页面刷新,代码如下 <button class="layui-btn" lay-submit lay-filter=&qu ...