【原創】抓個Firefox的小辮子，圍觀羣衆有：Chrome、Edge、IE8-11

時間 2019-11-06

標籤原創 firefox 小辮子圍觀羣衆 chrome edge ie8 欄目 Firefox 简体版

原文原文鏈接

前言

不少人都知道咱們在作FineUI控件庫，在這 9 年多的時間裏，在和瀏覽器無數次的交往中，也發現了多個瀏覽器自身的BUG，並公開出來方便你們查閱：css

這類BUG之因此被你們所深惡痛絕，在於其隱蔽性，不少時候不能用常規的邏輯去分析。另外一個緣由的開發人員通常都很善良，出現問題老是從自身找緣由，不多會懷疑到IDE，瀏覽器這些開發工具上面來。html

事實狀況是，瀏覽器也是開發人員開發的，是個軟件就有BUG！jquery

今天公開的這個Firefox BUG一直長期存在，最新的 Firefox Quantum 也位列其中，下面就聽我詳細道來......web

發現問題

昨天一個客戶向咱們反饋了一個問題，頁面初始時表格未顯示，等頁面回發後表格才顯示出現。奇怪的是，這個問題僅在Firefox下出現，Chrome、IE下是正常的。瀏覽器

下面是和客戶溝通的截圖：工具

接到反饋後，咱們當即進行了測試，在Chrome，Edge，IE下頁面第一次打開是這樣的：佈局

可是在Firefox中，頁面第一次打開時流程信息分組面板（GroupPanel）中的表格不見了：開發工具

只有在頁面回發後，纔會顯示出來。初步調試能夠看出，Firefox下頁面第一次加載時表格外部容器的高度不對：測試

分析問題

因爲這個問題只在Firefox下出現，其餘瀏覽器Chrome、Edge、IE8-11均顯示正常，所以咱們初步判斷是Firefox的BUG致使FineUI佈局時計算外部容器錯誤。ui

爲了排除這是Firefox 57.0 新版引入的問題，咱們還特地下載了一個老版本：

結果發現，Firefox老版本存在相同的問題，看來這個問題一直存在。

通過一段緊張的排查，咱們終於經過一個簡單的HTML頁面重現了這個問題：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
    <style>
        *, :after, :before {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <fieldset id="fieldset1" style="border:solid 1px red;width:500px;position:absolute;top:0;left:0;">
        <legend>fieldset</legend>
    </fieldset>

    <script>

        $(function () {
            $('#fieldset1').height(200);
            alert(parseInt($('#fieldset1').height(), 10));
        });

    </script>
</body>
</html>

Firefox下測試：

Chrome下測試：

Edge下測試：

IE11-IE8下測試：

通過對代碼的進一步測試發現，這個BUG在Firefox下出現須要知足以下三個條件：

設置CSS全局屬性：box-sizing: border-box
HTML標籤爲：fieldset
fieldset絕對定位：position:absolute

當同時知足這三個條件時，經過JS對 fieldset 標籤設置高度後，當即獲取高度無效！！！

這個簡單的示例中，若是把：

<fieldset id="fieldset1" style="border:solid 1px red;width:500px;position:absolute;top:0;left:0;">
        <legend>fieldset</legend>
</fieldset>

改成：

<div id="fieldset1" style="border:solid 1px red;width:500px;position:absolute;top:0;left:0;">
        
</div>

則Firefox下就不會有問題：

而咱們的 FineUI 的 GroupPanel 控件正是知足了這三個條件，才巧遇了這個Firefox一直存在的BUG：

在FineUI 佈局中，因爲當前頁面是佔據整個屏幕的，因此寬度和高度是從外而內設置的。上面圖片中經歷了這麼一個推理過程：

根據頁面的高度設置最外層節點的高度
一層一層向內推動，可計算出fieldset的高度爲135px
經過JS設置fieldset高度等於135px
此時獲取fieldset的高度卻不是135px，致使設置表格的外部容器的高度出現誤差（9.5px）

解決問題

固然最好的解決辦法就是等Firefox更新了，何時修正這個BUG。可是你能期望Firefox何時修正這個問題呢？既然已經存在幾年的時間了，頗有可能繼續存在下去。

從另外一個角度講，用老版本Firefox的用戶怎麼辦？問題仍是要解決，不能改變別人，只要拿本身動手了。

在經歷了那麼多瀏覽器BUG以後，咱們已經很淡定了，不就是設置節點屬性後不更新麼，咱們來強制更新一把！

下面的方案能夠很好的解決這個問題，而且僅對Firefox進行處理：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
    <style>
        *, :after, :before {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <fieldset id="fieldset1" style="border:solid 1px red;width:500px;position:absolute;top:0;left:0;">
        <legend>fieldset</legend>
    </fieldset>

    <script>

        $(function () {
            $('#fieldset1').height(200);

            
            if (/firefox/i.test(window.navigator.userAgent)) {
                // 強制瀏覽器從新繪製fieldset節點
                var fieldsetNode = $('#fieldset1');
                fieldsetNode.css('overflow', 'auto');
                fieldsetNode[0].scrollWidth;
                fieldsetNode.css('overflow', 'hidden');
            }
            

            alert(parseInt($('#fieldset1').height(), 10));
        });

    </script>
</body>
</html>

最終效果圖