问题描述
我绝对撕裂了我所有的头发，这是我遇到的这个非常令人沮丧和奇怪的 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 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。