我是如何通过debug成功甩锅浏览器的:解决fixed定位元素,在页面滚动后touch事件失效问题
如果你关注我应该知道,我最近对PC端页面进行移动适配。在这个过程中,为了节省用户300ms的时间,同时给予用户更及时的点击反馈(这意味着更好的用户体验),我在尝试使用移动端独有的 touchstart
事件替代传统的 click
事件,这过程中我遇到了一些小问题,并成功解决了,你可以通过这篇文章查看具体的情况。
所谓祸不单行,在即将发布上线的时候,我又突然发现使用 touchstart
事件后,移动设备上出现了另一个比较诡异的现象:当用户滚动页面后,原本绑定在fixed定位的navbar元素上的 touchstart
事件会时常失效。你可以通过扫描下方二维码,并使用你的Safari浏览器或Chrome浏览器(注意:不是浏览器自带的模拟器)亲自感受这一奇怪的现象。
当然,最终我成功解决了这个问题,并且有意思的是,这个问题似乎并不出自我的代码,而被我归咎于是浏览器的Bug。但是对于这个Bug出现的原理,我也只有一个大概的推测,如果你清楚的知道产生这一现象的原因,也欢迎你和我分享。
在本篇文章中,我不但会记录我的解决方案,并且会记录我在遇到这个问题后的debug的过程与分析思路。不过如果你正被这个问题搞得焦头烂额,只想快点摆脱这个问题,你可以直接翻阅到文章底部“解决方案”部分,参考我的解决方案(我真是贴心,对吧?
我是如何通过debug成功甩锅浏览器的:解决fixed定位元素,在页面滚动后touch事件失效问题的更多相关文章
- 在FireFox浏览器上,用stopImmediatePropagation阻止冒泡鼠标滚动事件
楔子 是不是在火狐用stopPropagation不太满意 很久没有笑过又不知为何 既然不快乐又不喜欢这里 不如一路向西用stopImmediatePropagation(其实我对浏览器的兼容性看不顺 ...
- zznu 1914 asd的甩锅计划
http://acm.zznu.edu.cn/problem.php?id=1914 asd的甩锅计划 时间限制: 1 Sec 内存限制: 128 MB提交: 114 解决: 10[提交][状态] ...
- asd的甩锅计划
asd的甩锅计划 时间限制: 1 Sec 内存限制: 128 MB提交: 177 解决: 19[提交][状态] 题目描述 大家对hdu上面的畅通工程系列一定很熟悉了吧.比如如下一段,就是畅通工程里 ...
- 忽视自身问题并“积极甩锅”,新氧CEO金星还要脸吗?
编辑 | 于斌 出品 | 于见(mpyujian) "互联网医美第一股"新氧果然还是爆雷了. 说"果然"是因为于见曾经针对新氧目前的商业模式进行过分析,认为以新 ...
- 记一次mysql请求超时甩锅历程
今天下午业务找我说是线上环境一个mysql库很慢,请求出现了大量的超时,让帮忙看看,以下为查找过程及甩锅过程. 1. mysql请求超时,ok,我们所有线上mysql都是开启了慢查询日志的,查找慢查询 ...
- 基于浏览器的HTML5地理定位
基于浏览器的HTML5地理定位 地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用.今天这篇文章向大家介绍一下 HTML ...
- debug.keystare找不到的解决办法[转]
重装系统之后,丢失了debug.keystore,找了很久都没有找到,根据网上所讲的只要重新运行一个android项目;就会在avd中生成一个新的debug.keystroe,此法也没解决,索性直接重 ...
- 关于浏览器,从输入URL到呈现页面过程!(主讲TCP/IP协议)
一.文本对话--从请求到响应 我们在浏览器中输入一个 URL,回车之后便会在浏览器中观察到页面内容.实际上这个过程是: (1)浏览器向网站所在的服务器发送了一个 Request(请求) (2)网站服务 ...
- UC浏览器中touch事件的异常记录
以前也在UC上面栽过几个坑,不过都是页面显示方面的.上个周的时候,商品详情页重做,要添加个上拉显示详情的效果. 有两个条件需要判断: 1.是否到达底部: 2.到达底部之后拖动的y轴距离. 效果写完后, ...
随机推荐
- mysql使用笔记(一)
一.安装 使用免安装的版本进行安装: 1. 解压到安装目录 2. 拷贝目录下的 my-default.ini 文件为 my.ini 文件 3. 修改my.ini 文件内容为 [client] port ...
- MQTT协议笔记之消息流
前言 前面的笔记已把所有消息类型都过了一遍,这里从消息流的角度尝试解读一下. 网络故障 在任何网络环境下,都会出现一方连接失败,比如离开公司大门那一刻没有了WIFI信号.但持续连接的另一端-服务器可能 ...
- Deploying Cloud Foundry on OpenStack Juno and XenServer (Part II)
link http://rabbitstack.github.io/deploying-cloud-foundry-on-openstack-juno-and-xenserver-part-ii/ L ...
- swiper的延迟加载(非官网方法)
网上找的: https://github.com/nolimits4web/Swiper/issues/626 var tabsSwiper = new Swiper('#games-content' ...
- TextureMerger1.6.6 三:Bitmap Font的制作和使用
BitmapFont主要用于特殊字体在游戏中的使用. 比如我想使用方正剪纸字体,但是没加载方正剪纸.ttf字体时,egret是没法使用这种字体的. 或者美工制作了效果拔群的0123456789数字字体 ...
- 【BZOJ1818】[Cqoi2010]内部白点 扫描线+树状数组
[BZOJ1818][Cqoi2010]内部白点 Description 无限大正方形网格里有n个黑色的顶点,所有其他顶点都是白色的(网格的顶点即坐标为整数的点,又称整点).每秒钟,所有内部白点同时变 ...
- xp系统报错 windows explorer has encountered a problem and needs to close.We are sorry for the inconvenience
xp系统遇到问题: 打开某个软件提示报错信息, windows explorer has encountered a problem and needs to close.We are sorry f ...
- rest_framework之版本详解 04
访问不同版本,给不同内容. rest规范:版本要么放url上:要么放请求头里. 1.原来的url的版本都写死了.只能写v1 from django.conf.urls import url from ...
- jQuery Ajax 全解析(转载)
本文地址: jQuery Ajax 全解析 本文作者:QLeelulu 转载请标明出处! jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写Java ...
- Pandas使用to_csv保存中文数据用Excel打开是乱码
关于这个问题还是困扰了很久,我生成了一些样本数据,打算保存到csv文件,之后用pandas的命令: # data是DataFrame的格式 data.to_csv('./data/myfile.csv ...