一個關於fixed抖動的小bug

前言

你們都知道position: fixed用於生成絕對定位的元素，相對於瀏覽器窗口進行定位。 元素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定。

忽然發現本身以前寫的網頁有個小bug：在購買頁面的結算按鈕部分，有個交互就是正常是基於標準文檔static裏流佈局在購物車下方，當網頁監聽滾輪位於上一部分，會固定定位fixed出如今用戶瀏覽器下方；由於按鈕有一個hover動效，就會出現機率性抖動，以下圖：

詳細說明

屢次測試，發現抖動是機率性出現；第一直覺認爲是Chrome瀏覽器問題，而後測試不一樣的版本，也換過其餘瀏覽器，發現都有問題出現；以後我把全部的盒子設置背景顏色，發現一個問題：眼中的實際盒子模型會高於鼠標所指的盒子模型區域一點點：

有抖動

正常盒模型

這就知道了具體問題了，就是這多頂出的大約1px的像素，靜態看彷佛沒問題，但一旦加上一些動效，就會有抖動，體驗不好。但由於是機率性問題，忽然不知道如何去解決？

問題解決

嘗試過多是代碼衝突，因而刪改了相關代碼，也不行！忽然想起之前看過一篇講如何優化動畫性能的文章，裏面說過一個解決抖動的方案，因而嘗試的加上了：

-webkit-transform: translateZ(0);
transform: translateZ(0);
複製代碼

反覆的測試，bug就真的解決了。

總結

通常關於css3動畫性能優化有2個：

• 儘可能使用 transform 當成動畫熟悉，避免直接使用 height,width,margin,padding 等；
• 建議開啓瀏覽器 GPU 硬件加速

因此，咱們使用tanslateZ(0)變成3d效果，開啓了瀏覽器 GPU 硬件加速，提升瀏覽器渲染的性能；上面這個因fixed定位頁面元素重排重繪時盒模型bug多是網頁渲染致使的，因此相似的bug或者抖動能夠嘗試tanslateZ(0)去解決，不過這樣也有缺點就是耗電和發熱問題。