問題描述
我絕對撕裂了我所有的頭髮，這是我遇到的這個非常令人沮喪和奇怪的 CSS 問題。
我正在使用 Bones boilerplate 做一個網站，一直很棒，直到現在…
它使用流體網格系統，我最近試圖創建一個簡單的畫廊，我已經做成一個網格 (4 圖像，每個包裹在四分之一列，第一個/最後一個類添加到第一/最後的圖像) 。
如果您將鼠標懸停在圖像上 (由於某些原因尤為明顯)，您會注意到，由於某些瘋狂的原因，它們可以將寬度更改為一個或兩個像素。圖像設置為 max-width：100％，我有一種感覺，這是某種原因的罪魁禍首，因為如果您給圖像一個”fixed” 寬度 (例如.gallery-icon img {max-width：165px;}，它修復了這個問題，但作為一個流體網格系統，我不能去那條路線，因為如果調整瀏覽器的大小，圖像保持 165px，即使我根據媒體設置 4 種不同的寬度，介質尺寸之間的圖像將不會正確對齊。
如果不是過渡效應問題 (如果我關閉轉換，圖像較低的不透明度，但沒有動畫)，它將工作，因為我想要它的工作:(
請幫忙！
這是一個空白的演示網站，其骨架樣板運行，只不過是頁面上的畫廊。讓我知道，如果你看到搖擺的問題。
(我無法在 jsfiddle 上重新創建它，所以我把它安裝在我躺在呵呵的舊域名上)
編輯：我剛剛注意到，這個問題似乎發生在寬度和高度上都大於 div 的圖像上。圖像 1 + 3 是這個，他們有 bug，而圖像 2,4 似乎是好的？而圖像 2 + 4 的高度比 div 更小….. 但即使我將圖像設置為 max-height，問題仍然存在。
EDIT2：添加了一個快速的視頻來顯示問題 (最新的 Firefox 和 Chrome)http://www.youtube.com/watch?v=uL81hLfMvvw
最佳解決方案
我會説這是 Chrome 中的一個錯誤 (我使用的是 24.0.1312.57 m) 。
問題不是真的在圖像 1 + 3，我已經看到它在圖像 2 。
我認為，當您的圖像的寬度是分數 (例如 146.71 像素) 時，會出現此問題。在固定顯示中，它被四捨五入到 146 像素。在轉換過程中，向上舍入 (更正確！) 到 147 像素。
次佳解決方案
感謝 pointing out the GPU aspect 的 val … 這提醒我這個 CSS-Snippet，這傾向於解決 Chrome 渲染問題：
-webkit-transform: translateZ(0);
我已經將這個應用於容器 (div.post)，其中包含有分數寬度的問題項目 (i.icon-)，問題解決了！
信用：我從 this answer 得到這個解決方案，修復導航到頁面錨點後不正確渲染 (固定) 的元素。
第三種解決方案
使用以下 css 提示將受影響的元素升級到新的複合圖層 (它解決了同樣的確切問題)：
.<your-css-selector> {
will-change: <css style about to change. example: opacity>;}
這表示合成器將元素的塗料過程隔離成新的複合層。在 chrome 開發工具中檢查圖層時，您可以確保元素已被提升，從而解決問題。該元素將出現在一個新的層中，具有以下 「合成原因：具有活動的加速動畫或轉換。有一個 will-change 合成提示。
看起來像通過這種方式將元素提升到新層之後，瀏覽器能夠正確地呈現轉換的最終狀態。
伊萬。
第四種方案
在 link 上，您可以找到 Mozilla bug 的解決方案。
您需要添加 1 個 CSS 規則：
-moz-backface-visibility: hidden;
參考文獻
注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。