【原创】Chrome最新版(53-55)再次爆出BUG!

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

前言

今年十月份,我曾发布一篇文章《Chrome53 最新版惊现无厘头卡死 BUG!》,不过那个BUG在最新的 Chrome 54 中已经修正。

 

而今天即将发布的Chrome弱智BUG:

  • 仅 Chrome 53 - Chrome 55(2016-12-05发布的)中存在问题
  • 国内双核浏览器 Chrome 45 中没有问题
  • Firefox,Edge,IE11-IE8浏览器中都没有问题

 

发现问题

最近在和客户沟通中,发现一个奇怪问题:

1. 页面中存在一个选项卡控件,选项卡里面是IFrame,页面初始显示时有纵向滚动条出现

2. 来回切换选项卡一次,原来选项卡页面的滚动条居然消失了!!

3. 奇怪的时,此时在选项卡页面内滑动鼠标滚轮,还是能够上下滚动页面的

 

页面打开时的样子:

 

来回切换一次选项卡后的样子:

 

奇怪的是,此时鼠标滚动还能上下滚动页面:

 

当然首先怀疑的就是自己写的代码问题,但是查了一遍居然毫无头绪。在此期间我们还发现如下问题:

1. FineUIPro从最新版v3.3,到之前v3.2,v3.1,v3.0.... 无一例外都有这个问题。这就有点不可思议了,我们开源版有 1300 多位捐赠用户,专业版有 100 多个企业客户,如此明显的一个BUG不可能这么多版本都没有被发现!!

假设之前的版本根本就没有这个问题,那么就是浏览器版本升级引入的BUG了。

2. 在Firefox,Edge,IE11,IE10,IE9,IE8下测试都没有这个问题,只有Chrome下才出现问题!!

 

由于,我们不得不怀疑是新版 Chrome 引入的BUG,为了验证这个想法,我们需要一个非常简单的可重现例子。

 

验证问题

由于FineUIPro本身的客户端代码还是很复杂了,为了避免其他代码的影响,我们需要一个可重现的简单的例子:

页面一:

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title>
</head>
<body><input type="button" value="页面二" οnclick="document.getElementById('frame1').style.display = 'block'; document.getElementById('frame2').style.display = 'none';" /><input type="button" value="页面三" οnclick="document.getElementById('frame1').style.display = 'none'; document.getElementById('frame2').style.display = 'block';" /><div style="border:solid 1px red;width:400px;height:200px;"><iframe id="frame1" style="width:100%;height:100%;border:none;" src="./page2.html"></iframe><iframe id="frame2" style="width:100%;height:100%;border:none;display:none;" src="./page3.html"></iframe></div>
</body>
</html>

这个页面代码非常简单,两个按钮,两个IFrame,默认显示第一个IFrame,通过按钮来切换两个IFrame的显示。

 

页面二:

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title>
</head>
<body>page2
</body>
</html>

页面三:

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title>
</head>
<body>page3<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />page3
</body>
</html>

 

下面分别在不同浏览器下运行效果:

Chrome 55.0.2883.75

FireFox 50.0.2

Edge

 

IE11

毫无疑问,这个是Chrome的BUG,那么到底是从哪个版本开始才出现的呢,这个就不好追踪。

 

我们也没有那么多精力把每个Chrome版本都测试下,所以就安装了两款国内的双核浏览器,分别用Chrome内核测试:

第一款产品是 360安全浏览器,极速模式下 Chrome 版本是 45,比较老,正好用来测试:

 

哈哈,看来 Chrome v45 还没有这个BUG,这就好办,说明这个BUG是Chrome新版才引入的!!

 

第二款产品是 QQ 浏览器,Chrome内核是 53

 

看来 Chrome 53 版本已经引入了这个BUG。

 

所以我们可以大致把引入这个BUG的Chrome版本限定在 v53 - v55(这个是2016-12-05 才发布的)。

 

解决问题

既然那么多Chrome版本都存在这个问题,要么是Google开发人员没发现,要么是不想修正了。

 

这里也顺便吐槽一下Chrome:虽然Chrome的运行速度最快,开发工具也非常方便,但是长期坚持在JavaScript编码第一线,居然发现了好多个仅在Chrome下出现的问题,让人恍惚有点IE6的感觉。仅仅是在 FineUIPro 就有好几处是 Chrome Only 的代码,有空我会再分享几个出来。

 

不管Google怎么办,这个问题还是要解决,又要是 Chrome Only 的代码了,哎!

 

1. 首先怀疑是 iframe 的 width:100% 和 height:100% 搞的鬼

由于代码结构太简单,没有多少让人怀疑的地方,就先把这个宽度和高度改为固定值试下:

页面四:

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title>
</head>
<body><input type="button" value="页面二" οnclick="document.getElementById('frame1').style.display = 'block'; document.getElementById('frame2').style.display = 'none';" /><input type="button" value="页面三" οnclick="document.getElementById('frame1').style.display = 'none'; document.getElementById('frame2').style.display = 'block';" /><div style="border:solid 1px red;width:400px;height:200px;"><iframe id="frame1" style="width:400px;height:200px;border:none;" src="./page2.html"></iframe><iframe id="frame2" style="width:400px;height:200px;border:none;display:none;" src="./page3.html"></iframe></div>
</body>
</html>

 

运行一下,问题依旧!

 

这时如果用Chrome调试工具查看,发现滚动条的位置还在,只是不显示:

 

2. 之前遇到类似的问题,我们可以强制浏览器重新渲染

网络上早已有相应的解决版本:查看StackOverflow上相关的技术帖子

页面五:

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title>
</head>
<body><script>function fixSize() {var container1 = document.getElementById('container1');container1.style.overflow = 'hidden';container1.scrollWidth;container1.style.overflow = 'auto';}</script><input type="button" value="页面二" οnclick="document.getElementById('frame1').style.display = 'block'; document.getElementById('frame2').style.display = 'none'; fixSize();" /><input type="button" value="页面三" οnclick="document.getElementById('frame1').style.display = 'none'; document.getElementById('frame2').style.display = 'block'; fixSize();" /><div style="border:solid 1px red;width:400px;height:200px;" id="container1"><iframe id="frame1" style="width:400px;height:200px;border:none;" src="./page2.html"></iframe><iframe id="frame2" style="width:400px;height:200px;border:none;display:none;" src="./page3.html"></iframe></div>
</body>
</html>

 

运行,问题依旧!

 

怪了,这个强制Chrome重新渲染的代码之前验证过的,这次居然也不行了。

 

郁闷中。。。。。先出去散步。。。。。。

散步中。。。。

散步中。。。。

散步中。。。。

散步中。。。。

散步中。。。。

散步中。。。。

散步中。。。。

散步中。。。。

散步中。。。。

散步中。。。。

散步中。。。。

散步中。。。。

散步中。。。。

散步中。。。。

散步中。。。。

散步中。。。。

散步中。。。。

散步中。。。。

散步中。。。。

散步中。。。。

 

3. 散步回来,觉得还是应该从强制Chrome渲染入手,这次我们来改变高度

页面六:

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title>
</head>
<body><script>function fixSize() {var container1 = document.getElementById('container1');container1.style.height = '199px';container1.scrollWidth;container1.style.height = '200px';}</script><input type="button" value="页面二" οnclick="document.getElementById('frame1').style.display = 'block'; document.getElementById('frame2').style.display = 'none'; fixSize();" /><input type="button" value="页面三" οnclick="document.getElementById('frame1').style.display = 'none'; document.getElementById('frame2').style.display = 'block'; fixSize();" /><div style="border:solid 1px red;width:400px;height:200px;" id="container1"><iframe id="frame1" style="width:100%;height:100%;border:none;" src="./page2.html"></iframe><iframe id="frame2" style="width:100%;height:100%;border:none;display:none;" src="./page3.html"></iframe></div>
</body>
</html>

 

帅呆了,这次居然可以了!!!现在Chrome 55下能正常运行了。

 

4. 优化一下,可以改变iframe的高度,而不是外部容器的高度,这样就不用硬编码了,代码更通用

页面七:

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title>
</head>
<body><script>function fixSize(iframeId) {var iframe = document.getElementById(iframeId);iframe.style.height = '99%';iframe.scrollWidth;iframe.style.height = '100%';}</script><input type="button" value="页面二" οnclick="document.getElementById('frame1').style.display = 'block'; document.getElementById('frame2').style.display = 'none'; fixSize('frame1');" /><input type="button" value="页面三" οnclick="document.getElementById('frame1').style.display = 'none'; document.getElementById('frame2').style.display = 'block'; fixSize('frame2');" /><div style="border:solid 1px red;width:400px;height:200px;" id="container1"><iframe id="frame1" style="width:100%;height:100%;border:none;" src="./page2.html"></iframe><iframe id="frame2" style="width:100%;height:100%;border:none;display:none;" src="./page3.html"></iframe></div>
</body>
</html>

 

这样也行,也算是解决了这个Chrome Only的BUG!!

 

后记

每次给老婆说起这样的稀奇古怪事,老婆都会嘲笑我是代码泥瓦匠,只能从外部修修补补。不过能修补上也算是阿弥陀佛了。

 

谁让咱一直坚持在代码一线呢。

 

在线演示

页面一(原始页面,Chrome下存在BUG):http://fineui.com/demo_pro/chromebug1/page1.html

页面四(仍然有问题):http://fineui.com/demo_pro/chromebug1/page4.html

页面五(仍然有问题):http://fineui.com/demo_pro/chromebug1/page5.html

页面六(修正了Chrome下的问题):http://fineui.com/demo_pro/chromebug1/page6.html

页面七(修正了Chrome下的问题):http://fineui.com/demo_pro/chromebug1/page7.html

 

转载于:https://my.oschina.net/iamsanshi/blog/801252

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/397225.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

进程kswapd0与events/0消耗大量CPU的问题

http://www.nowamagic.net/librarys/veda/detail/2539 今天下午网站宕了两次机&#xff0c;发工单给阿里云&#xff0c;发现原因是服务器的CPU 100%了。 重启服务器后&#xff0c;使用 top 命令看看是哪些进程消耗那么大的 CPU 使用。盯了有好十几分钟&#xff0c;主要消耗 CPU…

跑三小时的monkey测试该怎么算_浅谈App测试(下)~带音频

文 | Vicky采编&#xff5c;Emily浅谈App测试(上)&#xff5e;带音频一、功能测试​二、性能测试(1)耗电量影响因素&#xff1a;定位、传感器、蓝牙&#xff0c;其中CPU、持续定位是两个平台造成耗电的主要因素。(2)流量也就是常说的耗流量&#xff0c;影响因素有重复请求&…

2016-2017-2 《Java程序设计》课程学生博客和代码托管链接

2016-2017-2 《Java程序设计》课程学生博客和代码托管链接 博客 1552 20155201 李卓雯20155202 张 旭20155203 杜可欣20155204 王 昊20155205 郝博雅20155206 赵 飞20155207 王雪纯20155208 徐子涵20155209 林虹宇20155210 潘滢昊20155211 解雪莹20155212 江振思20155213 陆忠民…

回顾一年的工作历程_【设备管理公司】召开20202021年度总结计划表彰暨工作述职会议...

点击上方蓝字关注我们2020年即将过去&#xff0c;为了总结2020年各项工作开展情况&#xff0c;同时做好2021年工作计划与部署&#xff0c;2020年12月30日-31日&#xff0c;设备管理公司组织召开了2020-2021年度总结计划表彰暨工作述职会议。公司领导、各部门经理、部门主管、车…

注册验证的时候一直出现的报错问题,终于解决了

今天再注册验证表单的时候一直报错&#xff0c;但是什么都没有改&#xff0c;就报错了&#xff0c;后面才知道原来是和我上次上传图片的时候&#xff0c;导入的2个js的顺序有关系的&#xff0c; 45行和41行互相换一下位置就好了 转载于:https://www.cnblogs.com/likeji/p/61433…

重排序

一、重排序。 1、为什么需要重排序&#xff1f; 现在的CPU一般采用流水线来执行指令。一个指令的执行被分成&#xff1a;取指、译码、访存、执行、写回、等若干个阶段。然后&#xff0c;多条指令可以同时存在于流水线中&#xff0c;同时被执行。 指令流水线并不是串行的&#x…

tableau三轴该怎么做_如何用tableau绘制城市地铁线路图?

在用tableau绘制地铁线路图之前&#xff0c;当然是要获取相关的数据啦我们以郑州目前已开通的地铁为例&#xff0c;分别是1、2、5号线经度、维度可在 网页上自行搜索哦&#xff08;以谷歌地图为准&#xff09;有了这些下面我们就要开始啦将Excel中你所需要的数据直接导入到tabl…

哲学到编程:思想的实例化

万古长江水&#xff0c;千年儒释道。历史的长流中&#xff0c;芸芸众生&#xff0c;参差不齐&#xff0c;但总是能够总结出一个“生旦净末丑”来。儒、释、道&#xff0c;五千年的中华文化&#xff0c;却总是围绕着这三种主流思想交相演绎。千年间&#xff0c;豪士俊杰&#xf…

python 字符串交集_Python序列--集合(set)

集合集合用于保存不重复元素。- 集合和列表非常相似- 不同点&#xff1a;1.集合中只能存储不可变对象2.集合中存储的对象是无序(不是按照元素的插入顺序保存)3.集合中不能出现重复的元素集合的所有元素都放在一对”{ }” 中&#xff0c;两个相邻的元素之间用”,”分隔。集合最好…

【Python开发】Python的GUI用法总结

引用模块&#xff08;tkinter&#xff09;&#xff1a; 1 from tkinter import * 主窗口设置&#xff1a; 1 # 主窗口 2 tk Tk() # 主窗口实例化 3 tk.title("文本处理工具") # 主窗口标题 4 tk.geometry("700x4001001…

JAVA 环境变量配置

JAVA 环境变量配置 1. 安装JDK 2.配置系统变量 新建          JAVA_HOME&#xff1a;D:\Program Files\Java\jdk1.8.0_65 Path添加       %JAVA_HOME%\bin;%JAVA_HOME%\jre\bin; 新建CLASSPATH  .;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar; 3.完成…

8修改host_正点原子【STM32-F407探索者】第五十九章 USB 鼠标键盘(Host)实验

1)资料下载:点击资料即可下载2)对正点原子Linux感兴趣的同学可以加群讨论&#xff1a;9354467413&#xff09;关注正点原子公众号&#xff0c;获取最新资料更新上一章我们向大家介绍了如何利用 STM32F4 的 USB HOST 接口来驱动 U 盘&#xff0c;本章&#xff0c;我们 将利用 ST…

CF815C Karen and Supermarket [树形DP]

题目传送门 Karen and Supermarket On the way home, Karen decided to stop by the supermarket to buy some groceries. She needs to buy a lot of goods, but since she is a student her budget is still quite limited. In fact, she can only spend up to b dollars. Th…

6工程文件夹作用_data_dragon数据工程小工具收集

最近在GitHub上创建了一个新工程&#xff0c;收集个人在数据工程工作的小工具集合&#xff0c;命名为data_dragon (数据一条龙)。取这个名字的是希望这些脚本或代码能够复用&#xff0c;端到端地减少临时数据处理的时间。最近因为工作上的一些变化&#xff0c;写作节奏有点被打…

暑假第十七测

题解&#xff1a; 第一题 #include<bits/stdc.h> using namespace std; #define ll long long const int M 1e5 10; ll a[M], b[M], ans; priority_queue <ll, vector<ll> , greater<ll> > Q; int main(){freopen("buy.in","r",…

Nginx搭建flv视频点播服务器

Nginx搭建flv视频点播服务器前一段时间使用Nginx搭建的多媒体服务器只能在缓冲过的时间区域内拖放, 而不能拖放到未缓冲的地方. 这就带来了一个问题: 如果视频限速的速率很小, 那么客户端观看视频时肯定不流畅, 而且用户不能向前拖放, 用户体验很不好. 如果视频限速的速率很大或…

编码拾遗

1 #!/usr/bin/env python32 #-*- coding:utf-8 -*-3 4 Administrator 5 2018/8/16 6 7 8 # fopen("demo","r",encoding"utf8")9 # dataf.read() 10 # print(data) 11 # f.close() 12 13 14 # print("沈哲子") 15 16 s"中国&qu…

mybatis 不生效 参数_Mybatis-日志配置

日志Mybatis 的内置日志工厂提供日志功能&#xff0c;内置日志工厂将日志交给以下其中一种工具作代理&#xff1a;SLF4JApache Commons LoggingLog4j 2Log4jJDK loggingMyBatis 内置日志工厂基于运行时自省机制选择合适的日志工具。它会使用第一个查找得到的工具(按上文列举的顺…

PS通过滤色实现简单的图片拼合

素材如下&#xff1a; 素材一&#xff1a; 雪山 素材二&#xff1a; 月亮 效果&#xff1a; 实现步骤 1、在PS中打开雪山素材一 2、将月亮素材直接拖入雪山所在的图层中 3、锁定置入素材的高宽比&#xff08;点击一下链状按钮&#xff09; 4、调整月亮到合适大小合适位置 5、…

预处理:主成分分析与白化

主成分分析 引言 主成分分析&#xff08;PCA&#xff09;是一种能够极大提升无监督特征学习速度的数据降维算法。更重要的是&#xff0c;理解PCA算法&#xff0c;对实现白化算法有很大的帮助&#xff0c;很多算法都先用白化算法作预处理步骤。 假设你使用图像来训练算法&#x…