【原创】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，一经查实，立即删除！

相关文章

ThinkPHP 发送post请求

ThinkPHP 发送post请求

function post($url, $paramarray()){ if(!is_array($param)){ throw new Exception("参数必须为array"); } $httph curl_init($url); curl_setopt($httph, CURLOPT_SSL_VERIFYPEER, 0); curl_setopt($httph, CURLOPT_SSL_VERIFYHOST, 1); curl_setopt($httph,CURLOP…
阅读更多...
vue 打包路由报错_Vue下路由History模式打包后页面空白的解决方法

vue 打包路由报错_Vue下路由History模式打包后页面空白的解决方法

vue的路由在默认的hash模式下,默认打包一般不会有什么问题,不过hash模式由于url会带有一个#,不美观,而且在微信分享,授权登录等都会有一些坑.所以history模式也会有一些应用场景.新手往往会碰到history模式打包后页面一片空白的情况,而且没有资源加载错误的报错信息.这个其实仔…
阅读更多...
leetcode-回文链表

leetcode-回文链表

请判断一个链表是否为回文链表。 示例 1: 输入: 1->2 输出: false 示例 2: 输入: 1->2->2->1 输出: true进阶&#xff1a;你能否用 O(n) 时间复杂度和 O(1) 空间复杂度解决此题&#xff1f; 思路&#xff1a;先遍历链表&#xff0c;获得长度。 把前半部分的链表逆置…
阅读更多...
进程kswapd0与events/0消耗大量CPU的问题

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

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

索引器

namespace _03{ class Program { //请编写一个类&#xff1a;ItcastClass,该类中有一个私有字段_names,数据类型为&#xff1a;字符串数组&#xff0c;长度为5&#xff0c;并且有5个默认的姓名。 //要求&#xff1a;为ItcastClass类编写一个索引器&#xff0c;要求该索引器能够…
阅读更多...
跑三小时的monkey测试该怎么算_浅谈App测试(下)～带音频

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

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

Flask基础(03)--创建第一个Flask程序

# 导入Flask from flask import Flask# 创建Flask的应用程序 # 参数__name__指的是Flask所对应的模块&#xff0c;其决定静态文件从哪个地方开始寻找 app Flask(__name__,static_url_path/static, # 静态文件的访问路径&#xff0c;默认为/staticstatic_folderstatic, # 静态…
阅读更多...
2016-2017-2 《Java程序设计》课程学生博客和代码托管链接

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

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

C++快速排序

快速排序作为排序家族里面最为快捷的方式&#xff0c;值得思考。我们将一个数组中的某一个数定为基点&#xff0c;然后通过快速排序按照需求&#xff08;假设升序&#xff09;&#xff0c;将比基点小的数丢在基点左边&#xff0c;把比基点大的数丢在基点右边这样来将基点数的正…
阅读更多...
回顾一年的工作历程_【设备管理公司】召开20202021年度总结计划表彰暨工作述职会议...

回顾一年的工作历程_【设备管理公司】召开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三轴该怎么做_如何用tableau绘制城市地铁线路图?

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

JS七种加密解密方法

HTML或JS加密解密 本文一共介绍了七种方法&#xff1a; 　　一&#xff1a;最简单的加密解密 　　二&#xff1a;转义字符"\"的妙用 　　三&#xff1a;使用Microsoft出品的脚本编码器Script Encoder来进行编码 &#xff08;自创简单解码&#xff09; 　…
阅读更多...
提高solr的搜索速度

提高solr的搜索速度

之前是使用12台机分布式搜索&#xff0c;1台为主机做索引并分发给子机&#xff0c;8台做大索引搜索服务&#xff0c;3 台做小索引搜索服务&#xff0c;配置基本是内存在4-8G&#xff0c;cpu:2-8core的服务器&#xff0c;索引的大小为8G。搜索的响应时间 是150ms左右。&#xff…
阅读更多...
哲学到编程：思想的实例化

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

万古长江水&#xff0c;千年儒释道。历史的长流中&#xff0c;芸芸众生&#xff0c;参差不齐&#xff0c;但总是能够总结出一个“生旦净末丑”来。儒、释、道&#xff0c;五千年的中华文化&#xff0c;却总是围绕着这三种主流思想交相演绎。千年间&#xff0c;豪士俊杰&#xf…
阅读更多...
python 字符串交集_Python序列--集合（set）

python 字符串交集_Python序列--集合（set）

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

mysql binlog日志查看及解码

mysql bin log日志导出 mysqlbinlog mysql-bin.000005 > /home/17bin.log 需要添加参数&#xff08;--base64-outputdecode-rows -v&#xff09;对输出结果解码 mysqlbinlog --base64-outputdecode-rows -v mysql-bin.000005 > /home/17bin.log转载于:https://www.cnbl…
阅读更多...
【Python开发】Python的GUI用法总结

【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 环境变量配置

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.完成…
阅读更多...
最新文章

Copyright @ 2022~2023