文档章节

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

三生石上
 三生石上
发布于 2016/12/07 10:15
字数 2059
阅读 7249
收藏 32
点赞 23
评论 51

前言

今年十月份,我曾发布一篇文章《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="页面二" onclick="document.getElementById('frame1').style.display = 'block'; document.getElementById('frame2').style.display = 'none';" />
    <input type="button" value="页面三" onclick="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="页面二" onclick="document.getElementById('frame1').style.display = 'block'; document.getElementById('frame2').style.display = 'none';" />
    <input type="button" value="页面三" onclick="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="页面二" onclick="document.getElementById('frame1').style.display = 'block'; document.getElementById('frame2').style.display = 'none'; fixSize();" />
    <input type="button" value="页面三" onclick="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="页面二" onclick="document.getElementById('frame1').style.display = 'block'; document.getElementById('frame2').style.display = 'none'; fixSize();" />
    <input type="button" value="页面三" onclick="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="页面二" onclick="document.getElementById('frame1').style.display = 'block'; document.getElementById('frame2').style.display = 'none'; fixSize('frame1');" />
    <input type="button" value="页面三" onclick="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

 

© 著作权归作者所有

共有 人打赏支持
三生石上

三生石上

粉丝 43
博文 21
码字总数 42096
作品 4
合肥
程序员
加载中

评论(51)

卡皮球
卡皮球
给ifrome 的src=“这个文件” 的html 和body 加上 overflow:auto 完美解决
尐猪
尐猪
我今天也遇到了,我是显示的时候改了一下iframe的border的宽度,又恢复回去才解决的。。。然后看到你这个文章,原来是chrome的bug。。。怪不得以前没出现过,估计是后来升级了。。。。。
YO_OY
YO_OY
完美!
巢鹏
巢鹏
我查了一下这个bug在56~58依然存在
s
skychen_
这bug带广告666…
—
div会有这个问题吗?
明月依稀
明月依稀

引用来自“MJ_PC_Lab”的评论

1. 你能否去Chromium提交这个bug,不管对方是否接受。如果没有提交过,就不要抱怨,开源需要人人参与
2. 就算有bug,也不应该用贬损的词汇,bug哪个系统没有,我相信FineUI弱智bug多了去了(sorry)

。。。认真读完的人不会持这种关点评价楼主。
三生石上
三生石上

引用来自“宇-天”的评论

引用来自“三生石上”的评论

引用来自“MJ_PC_Lab”的评论

1. 你能否去Chromium提交这个bug,不管对方是否接受。如果没有提交过,就不要抱怨,开源需要人人参与
2. 就算有bug,也不应该用贬损的词汇,bug哪个系统没有,我相信FineUI弱智bug多了去了(sorry)
性情中人,无意贬低Chrome,这里的弱智指的是BUG本身,不要往自己身上套。

程序员向来对事不对人,任何程序都有BUG,正如你说的,FineUI的弱智BUG肯定也不少,不过我们尽量及时解决。像Chrome这样的大家,一个明显影响功能而且从评论中看很多人都遇到的问题,从50,到 51,到 52 ... 到2016-12-05发布的55一直都存在,不得不让人叹息。

去Chromium提交BUG,对不起,俺不是大公司没有专网,搜个技术问题还得去baidu和bing的,败在了GFW的石榴裙下:smile:

@三生石上 爱用不用咯
不得不用咯,谁让Chrome那么深受国人喜欢,客户的选择就是开发人员的选择
飘啊飘的瓶子
飘啊飘的瓶子
easyUI 在chrome会出现 滚动条
Jiazz
Jiazz

引用来自“开源中国国务院”的评论

现在不用iframe用什么?我们项目中还都是iframe,求指点
某些场合~~但。。文章中的这个场合就不合适~感觉 。。
【原创】Chrome53 最新版惊现无厘头卡死 BUG!

发现问题 今天有客户向我们反馈了一个BUG:一个页面在IE、FireFox、Chrome52中能正常运行,但是在最新版的Chrome53中显示不了??? 习惯性的,我们需要客户提供页面在浏览器中的HTML源代码,...

三生石上 ⋅ 2016/10/08 ⋅ 0

Chrome常用URL命令(伪URL)

在Chrome地址栏输入chrome://chrome-urls/可以看到所有的Chrome支持的伪RUL 1、chrome://accessibility/ 可达性分析,默认是关闭的,点击accessibility off后变成accessibility on|show acc...

easonjim ⋅ 2017/11/22 ⋅ 0

Google Chrome 66 稳定版更新:修复四大严重安全漏洞

本周四 Google 发布了 Chrome 66 稳定版维护更新,最新版本号为 v66.0.3359.170,目前已经面向Linux、Mac 和 Windows 三大平台开放,重点修复了一些非常严重的安全问题。 Google Chrome 66.0...

局长 ⋅ 05/11 ⋅ 0

Form在某些浏览器中自动向本页面提交并“刷新”

今天在码js时遇到一个神奇的Bug 就是这么一个简单的form提交,在Chrome上可以完美运行,表单提交成功后跳转到其他页面。但是在FireFox、Safari浏览器上总是会再次跳转到自己页面,而查看数据...

皇家马德里主教练齐达内 ⋅ 04/28 ⋅ 0

[下载]Google Chrome 66稳定版更新:修复四大严重安全漏洞

本周四Google发布了Chrome 66稳定版维护更新,最新版本号为v66.0.3359.170,目前已经面向Linux、Mac和Windows三大平台开放,重点修复了一些非常严重的安全问题。Google Chrome 66.0.3359.170...

稿源:cnBeta.COM ⋅ 05/11 ⋅ 0

Chrome本地安装Metamask

MetaMask是一个开源的以太坊钱包,能帮助用户方便地管理自己的以太坊数字资产,但在国内由于网络原因,你可能下载不了。本文将介绍如何解决metamask钱包无法下载的问题。 你可以按照以下操作...

汇智网教程 ⋅ 05/03 ⋅ 0

IE 仍是全球最流行浏览器,但马上要被 Chrome 超越了

BI中文站 4月5日报道 据NetMarketShare网站公布的2016年3月的使用数据显示,谷歌(微博)Chrome浏览器现在的市场份额已经达到39.09%,与IE浏览器同期的市场份额即43.40%之间的差距已经缩小到不...

oschina ⋅ 2016/04/06 ⋅ 34

Google Chrome 将从9月开始,默认 HTTPS 页面为安全站点

据外媒 bleepingcomputer 5月17日报道,谷歌正计划停止在地址栏中标记 HTTPS 页面为“安全”站点,换句话说,在没有发现异常的情况下,所有 HTTPS 的站点都会默认为安全,此举将于今年9月份发...

郭佳 ⋅ 05/18 ⋅ 0

Google Chrome OS 更新至 67.0.3396.26 版本

Chrome OS 开发者频道发布 67.0.3396.26 版本(平台版本:10575.22.0)。 此次更新包含大量 bug 修复、安全更新和性能提升,详情见更新日志。 Chrome OS 是一款 Google 开发的基于PC的操作系统...

雨田桑 ⋅ 05/02 ⋅ 0

Chrome OS新功能:可在平板模式下全屏Launcher

Google的技术布道者François Beaufort近日在Google+上发帖,向我们分享了即将登陆Chrome OS的新功能--Home Launcher,可在Chromebook平板模式下显示全屏Launcher。感兴趣的用户可以通过Chr...

稿源: ⋅ 04/25 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Sqoop

1.Sqoop: 《=》 SQL to Hadoop 背景 1)场景:数据在RDBMS中,我们如何使用Hive或者Hadoop来进行数据分析呢? 1) RDBMS ==> Hadoop(广义) 2) Hadoop ==> RDBMS 2)原来可以通过MapReduce I...

GordonNemo ⋅ 42分钟前 ⋅ 0

全量构建和增量构建的区别

1.全量构建每次更新时都需要更新整个数据集,增量构建只对需要更新的时间范围进行更新,所以计算量会较小。 2.全量构建查询时不需要合并不同Segment,增量构建查询时需要合并不同Segment的结...

无精疯 ⋅ 52分钟前 ⋅ 0

如何将S/4HANA系统存储的图片文件用Java程序保存到本地

我在S/4HANA的事务码MM02里为Material维护图片文件作为附件: 通过如下简单的ABAP代码即可将图片文件的二进制内容读取出来: REPORT zgos_api.DATA ls_appl_object TYPE gos_s_obj.DA...

JerryWang_SAP ⋅ 今天 ⋅ 0

云计算的选择悖论如何对待?

导读 人们都希望在工作和生活中有所选择。但心理学家的调查研究表明,在多种选项中进行选择并不一定会使人们更快乐,甚至不会产生更好的决策。心理学家Barry Schwartz称之为“选择悖论”。云...

问题终结者 ⋅ 今天 ⋅ 0

637. Average of Levels in Binary Tree - LeetCode

Question 637. Average of Levels in Binary Tree Solution 思路:定义一个map,层数作为key,value保存每层的元素个数和所有元素的和,遍历这个树,把map里面填值,遍历结束后,再遍历这个map,把每...

yysue ⋅ 今天 ⋅ 0

IDEA配置和使用

版本控制 svn IDEA版本控制工具不能使用 VCS-->Enable Version Control Integration File-->Settings-->Plugins 搜索Subversion,勾选SVN和Git插件 删除.idea文件夹重新生成项目 安装SVN客户......

bithup ⋅ 今天 ⋅ 0

PE格式第三讲扩展,VA,RVA,FA的概念

作者:IBinary 出处:http://www.cnblogs.com/iBinary/ 版权所有,欢迎保留原文链接进行转载:) 一丶VA概念 VA (virtual Address) 虚拟地址的意思 ,比如随便打开一个PE,找下它的虚拟地址 这边...

simpower ⋅ 今天 ⋅ 0

180623-SpringBoot之logback配置文件

SpringBoot配置logback 项目的日志配置属于比较常见的case了,之前接触和使用的都是Spring结合xml的方式,引入几个依赖,然后写个 logback.xml 配置文件即可,那么在SpringBoot中可以怎么做?...

小灰灰Blog ⋅ 今天 ⋅ 0

冒泡排序

原理:比较两个相邻的元素,将值大的元素交换至右端。 思路:依次比较相邻的两个数,将小数放在前面,大数放在后面。即在第一趟:首先比较第1个和第2个数,将小数放前,大数放后。然后比较第...

人觉非常君 ⋅ 今天 ⋅ 0

Vagrant setup

安装软件 brew cask install virtualboxbrew cask install vagrant 创建project mkdir -p mst/vmcd mst/vmvagrant init hashicorp/precise64vagrant up hashicorp/precise64是一个box......

遥借东风 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部