Html 非常难以解决且奇怪的CSS3不透明度转换问题（…一定是个bug？）

我绝对是撕了我所有的头发与这个高度令人沮丧和奇怪的CSS问题，我有

我正在使用的网站，使一个伟大的，直到现在

它使用流体网格系统，我最近尝试创建一个简单的图库，并将其制作成网格（4个图像，每个图像包装在四分之一列中，第一个/最后一个类添加到第一个/最后一个图像中）

如果您将鼠标悬停在图像上（由于某些原因在前三个图像上特别明显），您将注意到它们由于某些疯狂的原因而改变了一两个像素的宽度。图像设置为

max width:100%

，我感觉这就是罪魁祸首，因为如果您为图像设置“固定”宽度（例如

.gallery图标img{max width:165px；}）

，它解决了这个问题，但作为一个流体网格系统，我不能走这条路，因为如果调整浏览器的大小，图像会保持165px，即使我根据介质设置了4种不同的宽度，在介质大小之间，图像也不会正确对齐

如果不是因为

过渡

效果问题（如果我关闭

过渡

，图像降低

不透明度

很好，但没有动画），它将按我希望的方式工作：(

请帮帮我

这是一个空的演示站点，运行的是bones样板文件，页面上只有图库。如果您看到震动问题，请告诉我

（我无法在JSFIDLE上重新创建它，所以我将它安装在我在hehe附近的一个旧域上）

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

---

EDIT2：添加了一个快速视频来显示问题（最新的Firefox和Chrome）

我建议使用jQuery来处理不透明度，而不是使用CSS3属性，因为你的最大宽度是正确的，不幸的是，你的转换会弄乱

$(".gallery-icon img").hover(function(){
    $(this).fadeTo(fast, 0.7);
}, function(){
    $(this).fadeTo(fast, 1.0);
});

---

使用jQuery将修复许多这些小故障，并确保您的不透明度更改跨浏览器兼容完成（是的，我知道浏览器有很多用于转换的标记，但并非所有浏览器都有属性。）：）希望这会有所帮助！

我想说这确实是Chrome中的一个bug（我使用的是24.0.1312.57米）

这个问题并不是真的在图片1+3上，我已经在图片2上看到了

我认为当图像的宽度是一个分数（比如146.71 px）时，问题就出现了。在固定显示中，这会四舍五入到146 px。在转换过程中，这会四舍五入（更正确！）到147 px。

感谢VAL for…这让我想起了这个CSS片段，它可以解决Chrome渲染问题：

-webkit-transform: translateZ(0);

我已经将此应用于包含有问题项（I.icon-）的容器（div.post），该项的宽度为分数，问题已解决

信用：我从中得到了这个解决方案，用于在导航到页面锚之后修复错误呈现（修复）的元素。

在thins上，您可以找到Mozilla bug的解决方案

您需要添加1个CSS规则：

-moz-backface-visibility: hidden;

---

使用以下css提示将受影响的元素升级到新的复合层（它解决了与我相同的问题）：

{
将更改：；}

这表示合成器要将元素的绘制过程隔离到新的复合层中。在chrome dev工具中检查层时，可以确保元素已升级，从而解决问题。元素将出现在新层中，并具有以下“合成原因：具有活动的加速动画或转换”“具有将更改合成提示。”

看起来在以这种方式将元素升级到新层后，浏览器能够正确渲染过渡的最终状态

---

Ivan.

该演示似乎运行良好@Google Chrome v24.0.1312.57请再次检查，在不同的pc上使用Chrome我确信这不仅仅是我的pc的问题。将鼠标悬停在图像1+3上，并真正查看图像的右边框。这很微妙，但每当发生转换时，屏幕上都会有大量图像ns（flexslider滑动幻灯片）这是显而易见的，看起来很糟糕：（（我使用了相同的版本24.0.1312.57 m）我在Chrome 24.0.1312.57上看到它似乎有一个更新版本的Chrome（25.0.1364.97），尝试更新。我刚刚更新了它，但问题仍然存在，firefox中也出现了这个问题。这完全有道理，我觉得这就是问题所在。认识到这一点非常令人沮丧，但这是对的！这将解释为什么将宽度设置为整数（165px）修复了它。同时，我在金丝雀中检查了它。问题也存在，但在禁用GPU加速时消失。因此，当GPU（用于动画）启动时，问题将是不同的渲染。感谢tammy，确实非常有用：）不情愿地（我喜欢css），我将不得不使用jQuery。没问题！我也更喜欢CSS，但不是所有的bug都能解决，是吗？也许有一天！这种方法会在chrome中设置动画时影响元素的大小。当元素出现时，它就像在0到100%之间设置宽度和高度的动画一样，在这里也可以为我的动画不透明度设置动画。谢谢-这是sol我问了一个关于带有不透明转换的引导转盘的问题：令人惊讶的是，即使不透明转换应用于与错误元素重叠的不同元素，也会发生此错误。该解决方案对我有效，谢谢！效果很好！这种修复方法让我想起IE错误：（这也修复了标签

的

溢出：隐藏
属性的错误。在Android 4.4.2.Th上，链接的点击突出显示没有被截断
.<your-css-selector> {
will-change: <css style about to change. example: opacity>;}