css - 第一次悬停时图像闪烁 :scale (in Firefox only)

Question

编辑:似乎问题确实是 firefox bug .

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

所以这要么是 FF 中的错误，要么是我没有正确完成所有操作。无论哪种方式，我都想知道如何解决这个问题。

顺便说一句:我想简单地使用 jsfiddle 或 codepen 链接，但是在那里我无法重现使用完全相同代码的行为. (编辑:但是直接在 HTML 文件中使用此代码可以使其可重现。)

CSS

.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);    
}

HTML

<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>

Answer 1

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