html - 很难解决和奇怪的 CSS3 不透明过渡问题(...一定是个错误？)

Question

我遇到的这个非常令人沮丧和奇怪的 CSS 问题绝对让我焦头烂额。

我正在使用 Bones boilerplate做一个网站，一直很棒，直到现在......

它使用流体网格系统，我最近尝试创建一个简单的画廊，我将其制作成网格(4 张图片，每张图片都包裹在四分之一列中，第一个/最后一个类添加到第一个/最后一个图像) .

如果您将鼠标悬停在图像上(由于某种原因在前三个图像上尤其明显)，您会注意到它们的宽度由于某些疯狂的原因而改变了一两个像素。图片设置为 max-width:100%，我觉得这在某种程度上是罪魁祸首，因为如果你给图片一个“固定”宽度(例如 .gallery-icon img {max-width:165px;}，它解决了这个问题，但作为一个流畅的网格系统，我不能走那条路，因为如果调整浏览器的大小，图像保持 165px，即使我设置4 种不同的宽度，具体取决于媒体，在媒体尺寸之间，图像无法正确对齐。

如果不是因为 transition 效果问题(如果我关闭 transition ，图像会降低 opacity 很好，但是没有动画)，它会像我希望的那样工作:(

请大家帮忙!

这是一个空的演示站点，其中运行着骨架样板，页面上只有画廊。如果您看到晃动问题，请告诉我。

(我无法在 jsfiddle 上重新创建它，所以我将它安装在我周围的旧域上，呵呵)

编辑:我刚刚注意到问题似乎发生在宽度和高度都大于 div 的图像上。图片 1 + 3 是这样的，它们有错误，而图片 2,4 似乎没问题？图像 2+4 的高度比 div 小.....但即使我将图像设置为最大高度，问题仍然存在..

EDIT2:添加了一个快速视频来显示问题(最新的 Firefox 和 Chrome)http://www.youtube.com/watch?v=uL81hLfMvvw

Answer 1

感谢 vals pointing out the GPU aspect ...这让我想起了这个 CSS-Snippet，它倾向于解决 Chrome 渲染问题:

-webkit-transform: translateZ(0);

我已将此应用于包含有问题的元素 (i.icon-) 的容器 (div.post)，该元素具有分数宽度，问题已解决!

来源:我从 this answer 得到了这个解决方案在导航到页面 anchor 后修复错误呈现(已修复)的元素。