一般的 CSS 代碼只會出現(xiàn) UI 版式或者兼容性方面的小問題。但這里我們要分享一行有趣的 CSS，它可以直接讓你的 Chrome 頁面掛掉 :)
復現(xiàn)
其實這臺機器只有 8GB 內存，不過這不重要了。和讓 JS 崩潰的紅線容量 4GB 比起來，果然還是 CSS 更強大呢 :)
故事
這行代碼的發(fā)現(xiàn)，源自于我們的編輯器項目在實現(xiàn)畫布尺寸調節(jié)時的一個詭異現(xiàn)象：用戶調節(jié)畫布尺寸時， 只要新舊尺寸之比超過一定幅度，Chrome 就會卡死 。
雖然這個問題很難由普通用戶的操作路徑觸發(fā)，不過它所導致的后果確實比較嚴重。排查時我們首先考慮了 JS 阻塞和 DOM 重繪過頻等方面的可能性，但它們都不是問題所在。一個突破點在于調試器 Rendering 工具中 FPS Meter 的輸出：
這里 GPU Memory 被占滿了。雖然這個提示信息現(xiàn)在看來很明顯是與硬件加速有關的，但在沒有相關經(jīng)歷的情況下我們還是沒有確定它與具體代碼之間的關聯(lián)。直到我們偶然查看 Chrome 設計文檔中關于 Compositing 的介紹時，發(fā)現(xiàn)了一個行為：Blink 會將 DOM 節(jié)點映射到 LayoutObject 的渲染樹，這棵樹中的節(jié)點理論上每個都能具備到渲染后端的上下文，但為了節(jié)約資源 Chrome 會將它們做一些合并后再渲染。而這時存在 CSS 定位（如絕對定位與 transform）的元素是不能合并的，這會造成對顯存的額外開銷。
基于這個信息的提示，我們使用 Layout 工具來調試當時的頁面，果然找到了一個特殊的地方：
新聞熱點
疑難解答
