【原创】Chrome最新版（53-55）再次爆出BUG！-白红宇

【原创】Chrome最新版（53-55）再次爆出BUG！

阅读量：6509 次

发布时间：2019-06-24

本文共 2633 字，大约阅读时间需要 8 分钟。

前言

今年十月份，我曾发布一篇文章《》，不过那个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本身的客户端代码还是很复杂了，为了避免其他代码的影响，我们需要一个可重现的简单的例子：

页面一：

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

页面二：

    
                 page2

页面三：

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

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% 搞的鬼

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

页面四：