一个 passive 引发的bug
不是什么很难的东西,权且做个记录。
首先说下背景,目前的项目中,需要同时绑定 wheel 和 scroll 事件。
绑定 wheel,目的是开发 ctrl + wheel 缩放页面功能,此功能与浏览器本身的冲突,因此需要禁用滚轮原生功能,示意代码:
window.addEventListener('wheel', function(e){
e.preventDefault();
}, {passive: false});
此时遇到个问题,禁用 wheel 的同时,会将 scroll 事件也同时禁用,这个蛋疼的问题以前确实一直没注意到,最终一行代码搞定:
window.addEventListener('wheel', function(e){
if(e.ctrlKey === true){
e.preventDefault();
}
}, {passive: false});
测试一圈后发现,其他主流浏览器都 ok,唯独在搜狗浏览器中,无论如何禁用都没用。
观察了百度地图、蓝湖等成熟产品,也发现了同样的问题,此时的搜狗浏览器版本是 8.5.7,但在同事的 8.5.10 中却并没有这个问题。
到搜狗浏览器论坛中,搜索 “缩放” 关键字,发现也有用户跟我遇到的问题一样,但官方未回复。
至此,基本可以确定是搜狗浏览器的兼容问题,最终也确实如所想,升级到 8.5.10后,本问题未复现。
另外放一个百度过程中,找到的一种解决方案:
document.body.style.zoom = 'reset'
使用这个属性,可以让浏览器缩放时,缩放的数字变化,但页面实际不进行缩放,未经过大量浏览器测试,真实效用不保证。
一个 passive 引发的bug的更多相关文章
- 一个排序引发的BUG
你好呀,我是why. 前两天在 Git 上闲逛的时候又不知不觉逛到 Dubbo 那里去了. 看了一下最近一个月的数据,社区活跃度还是很高的: 然后看了一下最新的 issue,大家提问都很积极. 其中看 ...
- 一个空格引发的bug
好久没写博客了. 我们的一个项目用的thinkphp框架,当在debug模式下面运行很正常,但切换到生产模式时,刷新页面第一次可以正常显示,刷新第二次会出现错误如下: Fatal error: Cal ...
- 一个request引发的bug
有很多错误由于需要是多线程是才会发生,导致经常在开发时很难发现, import java.lang.reflect.ParameterizedType; import java.util.List; ...
- 一个字体引发的bug
delphi 7 中默认字体样式为‘MS Sans Serif’,一般情况下子级控件会继承父级一些属性,其中包括字体(包括字体大小,字体样式,颜色等)属性.如果动态创建控件且需要修改字体颜色或者大小时 ...
- Spring 循环引用(一)一个循环依赖引发的 BUG
Spring 循环引用(一)一个循环依赖引发的 BUG Spring 系列目录(https://www.cnblogs.com/binarylei/p/10198698.html) Spring 循环 ...
- 由一个emoji引发的思考
由一个emoji引发的思考 从毕业以来,基本就一直在做移动端,但是一直就关于移动端的开发,各种适配问题的解决,在日常搬砖中处理了就过了,也没有把东西都沉淀下来,觉得甚是寒颜.现就一个小bug,让我们来 ...
- 安卓微信overflow-x overflow-y引发的bug
今天xgo文章图片页上线用微信扫页面发现一个bug,页面可以双击放大缩小. 找了半天原因,发现是图片描述设置了overflow-y引发的bug. 建议在微信场景里满屏显示不能滚动的页面里慎用overf ...
- QByteArray引发的bug
QByteArray引发的bug 在接收UDP数据的函数里,有如下代码片段 if(0x10 == data.size() && 0xCA == (unsigned char)data. ...
- PHP 中一个 False 引发的问题,差点让公司损失一百万
PHP 中一个 False 引发的问题,差点让公司损失一百万 一.场景描述 上周我一个在金融公司的同学,他在线上写一个 Bug,差点造成公司损失百万.幸好他及时发现了这个问题并修复了.这是一个由 PH ...
随机推荐
- ArrayList 源码
1.ArrayList的类关系: 2.属性及方法 2.1 构造 三个构造方法分别对应: 通过传入初始化容器大小构造数组列表 ...
- MySQL 优化之 index_merge (索引合并)
深入理解 index merge 是使用索引进行优化的重要基础之一.理解了 index merge 技术,我们才知道应该如何在表上建立索引. 1. 为什么会有index merge 我们的 where ...
- JAVA可能问的几个面试题问题及问题的标准答案
问题一:你希望工作环境是怎样的? 标准答案:我对环境没有苛求,我会努力适应环境的. 注:此问题是在测试你的求职心态,是以自己为中心还是以工作为中心. 问题二:你觉得自己有哪些缺点? 标准答案:说一些对 ...
- 分治FFT模板
题目链接:https://www.luogu.org/problemnew/show/P4721 总结了一下蒟蒻FFT/NTT容易写错的地方: 1.rev数组求错. 2.cdq注意顺序:先递归 ...
- CSS学习笔记之CSS3新特性
目录 1.边框 2.背景 3.文本 4.字体 5.转换 6.过渡 7.动画 8.多列 9.自定义尺寸 CSS 用于控制网页的样式和布局,而 CSS3 是最新的 CSS 标准,这篇文章将着重介绍 CSS ...
- 快速上手Linux 玩转典型应用_慕课网笔记
1.没有exe安装程序 2.区分大小写 3.一切皆文件 4.文件后缀不是那么重要,只是为了好识别 -------------------------------------------------- ...
- linux根据进程名字杀死进程
ps -ef | grep procedure_name | grep -v grep | awk '{print $2}' | xargs kill -9 Linux Shell脚本实现根据进程名杀 ...
- 05springMVC数据格式化
数据格式化简介 内建的格式转换器 使用内建格式转换器示例 字段级别的解析/格式化 集成到Spring Web MVC环境 1 数据格式化简介 对属性对象的输入/输出进行格式化,其实是属于“类 ...
- magento 在全站或者某页面增加外联js或者css的方法
1,在整站末尾增加外联资源 找到当前主题的布局文件cms.xml,在<default></default>添加如下代码: <reference name="be ...
- HDU 4512 最长公共上升子序列
各种序列复习: (1)最长上升子序列. 1.这个问题用动态规划就很好解决了,设dp[i]是以第i个数字结尾的上升子序列的最长长度.那么方程可以是dp[i]=max(dp[j]+1).(j<i). ...