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

2019獨角獸企業重金招聘Python工程師標準>>>

前言

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