Css 使用transform:scale（仅在Firefox中）在第一次悬停时图像闪烁

编辑：看来问题真的很严重

该效果只需缩放图像，但在FF中第一次悬停时它会闪烁（要复制，请使用ctrl+F5）。使用最新的FF（45.0.1）进行测试。在Chrome和IE10中没有问题

所以这要么是FF中的一个bug，要么是我做的每件事都不正确。不管怎样，我想知道如何解决这个问题

顺便说一句：我只想使用一个jsfiddle或codepen链接，但在那里我无法用完全相同的代码重现行为。（编辑：但在HTML文件中直接使用此代码可以使其重现。）

CSS

HTML

这似乎是一个错误，我目前还没有找到任何好的修复方法，但如果您可以加载比容器窄一点的图像，

转换

似乎可以正常工作。

如果您无法使用提供的代码重现问题，则表明问题出在其他地方，不是吗？不是。如果你在本地创建一个html文件，并使用这个精确的代码，你可以复制它。仅使用jsfidlle，因此将代码放在iframe中（或者区别是什么）意味着无法复制它。使用

width:100%

而不是

max width:100%

@freestock.tk修复了这是从一段更大的代码中提取的，其中还混合了一些文本，但我不想改变太多。我可以确认我有这个问题。闪烁不是在FF v 45.0（OSX）上发生的，而是在45.01（OSX）上发生的

.image-box {   
    position: relative;
    overflow: hidden;
} 

.image-box .zoom {  
    position: absolute;
    backface-visibility:hidden;
}

.image-box .zoom ~ img {  
    position: absolute;  
    backface-visibility:hidden;
    max-width: 100%;

    -webkit-transition:all .5s;
    -moz-transition:all .5s;
    transition:all .5s;
}

.image-box:hover .zoom ~ img {  
    -webkit-transform:scale(1.3);
    -moz-transform:scale(1.3);
    transform:scale(1.3);    
}

<div style="width: 221px; height: 147px;" class="image-box">
    <div style="width: 221px; height: 147px;" class="zoom"></div>
    <img src="http://media.moddb.com/images/mods/1/22/21735/grizzly3-300x200.jpg">
</div>