【原创】Chrome最新版(53-55)再次爆出BUG!
【原创】Chrome最新版(53-55)再次爆出BUG!
三生石上 发表于1年前
【原创】Chrome最新版(53-55)再次爆出BUG!
  • 发表于 1年前
  • 阅读 6577
  • 收藏 32
  • 点赞 23
  • 评论 51

腾讯云 技术升级10大核心产品年终让利>>>   

前言

今年十月份,我曾发布一篇文章《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

 

共有 人打赏支持
三生石上
粉丝 44
博文 21
码字总数 42096
作品 4
评论 (51)
乌龟壳
很奇怪你都是什么客户,追求新版浏览器做什么?
laudukang
厉害
wuyiw
https://bugs.chromium.org/p/chromium/issues/list?can=2&q=component%3ABlink%3ELayout%3EScrollbars+iframe&colspec=ID+Pri+M+Stars+ReleaseBlock+Component+Status+Owner+Summary+OS+Modified&x=m&y=releaseblock&cells=ids
有几个issue了, 从其中这个:
https://bugs.chromium.org/p/chromium/issues/detail?id=641881&q=component%3ABlink%3ELayout%3EScrollbars%20&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified
看来, chrome 50.0.2631.0开始有这个bug
whinc
精神可嘉
不想做程序员的诸葛先生
都什么年代了还用iframe,同问 “很奇怪你都是什么客户,追求新版浏览器做什么?”
hsl727261250
iframe在idea里都提示弃用了。
dolloyo
追求新版浏览器做什么?老老实实地用IE6不好么?(#贴吧大鼻孔)
吾爱
iframe某些场合还是很有用的 很奇怪有些程序员看待问题不是黑就是白
开源中国国务院
现在不用iframe用什么?我们项目中还都是iframe,求指点
lxbzmy
我觉得可以不让iframe出滚动条嘛。让里头的divscroll
你若安好
果然有这个问题 厉害了
阿影

引用来自“诸葛先生”的评论

都什么年代了还用iframe,同问 “很奇怪你都是什么客户,追求新版浏览器做什么?”
在不用 html5和flash的情况下,ajax上传文件还是要用的。
kangkangkf
现在都不建议用iframe了,Google应该也是不想修复这个BUG
张伟斌卍
可能是谷歌要你们弃坑转投h5,才精简了iframe部分的功能。
554330833a

引用来自“诸葛先生”的评论

都什么年代了还用iframe,同问 “很奇怪你都是什么客户,追求新版浏览器做什么?”
那用什么??
554330833a

引用来自“诸葛先生”的评论

都什么年代了还用iframe,同问 “很奇怪你都是什么客户,追求新版浏览器做什么?”
不是吧,那用什么??
蓝水晶飞机
我早2~3个月前都发现啦,我项目里面也是这样的选项卡实现的,明明有滚动条,切个Tab回来就没了,算BUG但并不严重。
三生石上

引用来自“诸葛先生”的评论

都什么年代了还用iframe,同问 “很奇怪你都是什么客户,追求新版浏览器做什么?”
iframe有自己的适用场景:
1. 框架式页面布局
2. 物理隔离代码逻辑,代码解耦合
3. 通过单独页面访问某个代码块
4. iframe还可以用来模拟无刷新文件上传
5. ......
个人觉得可能google使用iframe的场景不多,所以这个就容易测试不到

虽然Google一直在倡导单页面,从gmail就开始了,到现在的angularjs,但是那个一坨一坨的混在一起,个人不喜欢,还是iframe隔离成一个一个功能的方便实用
三生石上

引用来自“乌龟壳”的评论

很奇怪你都是什么客户,追求新版浏览器做什么?
是被迫追求好吧,很多客户并不是直接用Chrome浏览器,而是用国内的一堆双核浏览器,而这些浏览器一般都倾向于集成最新的 Chromium
三生石上

引用来自“lxbzmy”的评论

我觉得可以不让iframe出滚动条嘛。让里头的divscroll
这个滚动条不是iframe的,是iframe外部DIV容器的
×
三生石上
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: