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

時間 2019-11-20

標籤原創 chrome 最新版再次爆出 bug 欄目 Chrome 简体版

原文原文鏈接

前言

今年十月份，我曾發佈一篇文章《Chrome53 最新版驚現無厘頭卡死 BUG！》，不過那個BUG在最新的 Chrome 54 中已經修正。html

而今天即將發佈的Chrome弱智BUG：chrome

僅 Chrome 53 - Chrome 55（2016-12-05發佈的）中存在問題
國內雙核瀏覽器 Chrome 45 中沒有問題
Firefox，Edge，IE11-IE8瀏覽器中都沒有問題

發現問題

最近在和客戶溝通中，發現一個奇怪問題：瀏覽器

1. 頁面中存在一個選項卡控件，選項卡里面是IFrame，頁面初始顯示時有縱向滾動條出現安全

2. 來回切換選項卡一次，原來選項卡頁面的滾動條竟然消失了！！網絡

3. 奇怪的時，此時在選項卡頁面內滑動鼠標滾輪，仍是可以上下滾動頁面的app

頁面打開時的樣子：工具

來回切換一次選項卡後的樣子：開發工具

奇怪的是，此時鼠標滾動還能上下滾動頁面：測試

固然首先懷疑的就是本身寫的代碼問題，可是查了一遍竟然毫無頭緒。在此期間咱們還發現以下問題：優化

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

相關標籤/搜索