Question

编辑：似乎问题实际上是firefox bug。

效果应该只是缩放图像，但首次悬停在FF 时闪烁（重现使用ctrl + F5）。测试了最新的FF（45.0.1）。在Chrome和IE10中没有问题。

所以这是FF中的一个错误，或者我没有正确地完成所有事情。无论哪种方式，我想知道如何解决这个问题。

BTW：我想简单地使用 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稍微窄一点的图像似乎按预期工作。

使用transform：scale首次悬停时图像闪烁（仅限Firefox）

1 个答案: