很难解决和奇怪的css3不透明度过渡问题（…必须是一个错误？）
我绝对把我所有的头发都拿出来，带着这个非常令人沮丧和奇怪的css问题。
我正在使用骨头样板制作一个网站，它一直很棒，直到现在…
它使用stream体网格系统，我最近试图创build一个简单的画廊，我已经成为一个网格（4个图像，每个包装在一个四分之一的列，第一/最后一个类添加到第一个/最后一个图像）。
如果将鼠标hover在图像上（出于某种原因，前三种情况尤其明显），您会注意到由于某种疯狂的原因，它们将宽度改变了一个或两个像素。 图像设置为最大宽度：100％，我有一种感觉，这是某种程度上的罪魁祸首，因为如果你给图像一个“固定的”宽度（例如.gallery-icon img {max-width：165px;}，它解决了这个问题，但作为一个stream动的网格系统，我不能沿着这条路线走，因为如果调整浏览器的大小，图像保持165px，即使我根据媒体设置了4种不同的宽度，在媒体大小之间，图像将不能正确alignment。
如果它不是过渡效果问题（如果我把过渡closures，图像较低的不透明度罚款，但没有animation），它会工作，因为我想它的工作:(
请帮助家伙！
这是一个空的演示网站，骨头样板运行，只是在页面上的画廊。 让我知道如果你看到摇晃的问题。
（我不能在jsfiddle上重新创build它，所以我把它安装在一个旧的域名上，
编辑：我刚才注意到，这个问题似乎发生在宽度和高度都比div大的图像。 图像1 + 3是这个，他们有错误，而图像2,4似乎是好的？ 和图像2 + 4有一个比div更小的高度…..但即使我将图像设置为最大高度，问题仍然存在。
编辑2：添加了一个快速的video来显示问题（最新的Firefox和Chrome） http://www.youtube.com/watch?v=uL81hLfMvvw
我会说，这是一个真正的Chrome中的错误（我使用24.0.1312.57米）。
这个问题实际上并不在图像1 + 3上，我已经在图像编号2上看到了。
我认为这个问题出现时，你的图像的宽度是一个分数（比如146.71像素）。 在固定的显示器，这是四舍五入到146像素。 在过渡期间，这是四舍五入向上（更正确的）到147像素。
感谢vals 指出GPU方面 …这让我想起了这个CSS-Snippet，它可以解决Chrome渲染问题：
-webkit-transform: translateZ(0); 我已经应用这个容器（div.post）包含有问题的项目（i.icon-），它有一个部分宽度，问题解决了！
信用：我已经从这个答案得到这个解决scheme，以解决导航到页面定位点后错误地呈现（固定）元素。
使用下面的css提示将受影响的元素提升到一个新的复合层（它解决了与我完全相同的问题）：
.<your-css-selector> { will-change: <css style about to change. example: opacity>;}
这表明合成器将元素的绘制过程分离成一个新的复合层。 在使用chrome开发工具检查图层时，您可以确保该元素已被提升，从而解决问题。 该元素将出现在一个新的图层，具有以下“合成原因：有一个活跃的加速animation或过渡。 有一个意志改变合成暗示。
看起来像这样将元素提升到一个新层后，浏览器能够正确地呈现转换的最终状态。
伊万。
在链接你可以find解决Mozilla的错误。
你需要添加1个CSS规则：
-moz-backface-visibility: hidden;
我build议使用jQuery来处理你的不透明性，而不是使用CSS3属性，因为你的正确性在于你的最大宽度是不幸的，因为你的转换。
$(".gallery-icon img").hover(function(){ $(this).fadeTo(fast, 0.7); }, function(){ $(this).fadeTo(fast, 1.0); });
使用jQuery将解决很多这些与过渡小毛刺，并确保您的不透明度更改是跨浏览器兼容（是的，我知道有很多浏览器的转换标记，但没有属性的所有浏览器。:) :)希望帮助！
