ios中fixed元素在滚动布局中的延时渲染问题
在之前做的一个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元素在滚动布局中的延时渲染问题的更多相关文章
- duilib中的V和H布局中滚动条问题
转自博客:http://blog.csdn.net/damingg/article/details/41149037 首先看一段xml代码 [html] view plaincopy <?xml ...
- Python:将数组中的元素导出到变量中 (unpacking)
问题 你需要将数组(list)或元组(tuple)中的元素导出到N个变量中. 解决方案 任何序列都可以通过简单的变量赋值方式将其元素分配到对应的变量中,唯一的要求就是变量的数量和结构需要和序列中的结构 ...
- js中迭代元素特性与DOM中的DocumentFragment类型 笔记
JS中迭代元素特性 在需要将DOM结构序列化为XML或者HTML字符串时,多数都会涉及遍历元素的特性,这个时候attributes属性就可以派上用场. 以下代码展示了如何迭代元素的每一个特性,然后将他 ...
- js获取iframe中的元素以及在iframe中获取父级的元素(包括iframe中不存在name和id的情况)
第一种情况:iframe中不存在name和id的方法:(通过contentWindow获取) var iframe = document.getElementsByTagName('iframe' ...
- O(1)时间复杂度实现入栈、出栈、获得栈中最小元素、获得栈中最大元素(转)
题目要求:定义栈的数据结构,添加min().max()函数(动态获取当前状态栈中的最小元素.最大元素),要求push().pop().min().max()的时间复杂度都是O(1). 思路解析:根据栈 ...
- 删除列表中重复元素以及求list中元素个数
Python 去除列表中重复的元素 来自比较容易记忆的是用内置的set l1 = ['b','c','d','b','c','a','a'] l2 = list(set(l1)) print l2 还 ...
- css中伪元素before或after中content的特殊用法attr【转】
[原文]https://segmentfault.com/a/1190000002750033 CSS中主要的伪元素有四个:before/after/first-letter/first-line,在 ...
- css中伪元素before或after中content的特殊用法attr
html代码如下: <div class="haorooms"> <span data-haorooms="haorooms鼠标效果tips-纯css& ...
- ios下,微信小程序scrollview组件中的fixed元素抖得和帕金森病人一样
问题现象 这个问题是最近在优化小程序代码时发现的. 在ios环境下,微信小程序的scrollview组件包裹着一个position:fixed的view. 当在scrollview组件上滑动时,这个v ...
随机推荐
- 搭建phpMyAdmin
MySQL常见的管理工具 今天选择的phpMyAdmin 一款基于浏览器管理数据库的工具. 下载可以去官网下载https://files.phpmyadmin.net/phpMyAdmin/4.7.5 ...
- Mac文件上传下载到服务器指定命令
下载文件夹 scp -r 远程登录服务器用户名@远程服务器ip地址:/下载文件夹的目录 『空格』 本地目录 下载文件 scp 远程登录服务器用户名@远程服务器ip地址:/下载文件的 ...
- 交换机上的MAC地址表
拓扑图: 1.首先在R1上的配置: R1(config)#int R1(config)#interface g R1(config)#interface gigabitEthernet 0/0 R1( ...
- DefaultSingletonBeanRegistry源码解析
DefaultSingletonBeanRegistry是SingletionBean注册器的默认实现. 来学习下DefaultSingletonBeanRegistry的源码: package or ...
- BlackNurse攻击:4Mbps搞瘫路由器和防火墙
研究人员宣称,最新的知名漏洞BlackNurse,是一种拒绝服务攻击,能够凭借仅仅15到18Mbps的恶意ICMP数据包就将防火墙和路由器干掉. 该攻击会滥用Internet控制报文协议(ICMP)第 ...
- 原生JS设计轮播图
一.效果预览: 由于只能上传2M以下的图片,这里只截取了自动切换的效果: 二.编写语言 HTML.CSS.原生JS 三.编写思路 (一)HTML部分 1..slide意为滑槽,里面存放所有图片: 2. ...
- 图论--最短路--第K短路(IDA*)(IDA Star)模板
#include <iostream> #include <cstdio> #include <cstring> #include <queue> us ...
- The Preliminary Contest for ICPC Asia Xuzhou 2019 徐州网络赛 B so easy
题目链接:https://nanti.jisuanke.com/t/41384 这题暴力能过,我用的是并查集的思想,这个题的数据是为暴力设置的,所以暴力挺快的,但是当他转移的点多了之后,我觉得还是我这 ...
- python 中关于无法导入自己写的类。解决方法
1.错误描述 之前在学习python的过程中,导入自己写入的包文件时.from 自己写的类,会发现没有弹出选择.并且全输入类名称后会发现类名与相关导入的方法会爆红.如图: 2.原因分析 pycharm ...
- ubuntu 下修改MySQL 的root用户密码
环境:Ubuntu 16.04 : Mysql 5.7问题:mysql root登录密码 忘记了..忘记了..忘..了 1.登录MySQL $ mysql -u root -p 输入密码,如果登录 ...