前言

大家都知道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)去解決，不過這樣也有缺點就是耗電和發熱問題。

總結

以上是生活随笔為你收集整理的一个关于fixed抖动的小bug的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。