Question

我使用CSS转换在:hover上增加了3个元素。其中两个工作得很好，但最后一个在Firefox中闪烁，但在Chrome和IE中工作。所以问题只出在Firefox中。

CSS：

.contact{
    width: 300px;
    height: 250px;
    margin: 10px;
    margin-top: 37px;
    float: right;
    background-color: #eca83b;
    border-radius: 10%;
    transition: 0.5s;
}

.contact:hover{
    width: 320px;
    margin: 0px;
    margin-top: 27px;
    height: 260px;
}

HTML：

<section class="contact">
   <svg> 
   </svg>
   <h2 class="item">Contact</h2>
</section>

什么可能导致这个问题？

Answer 1

我遇到了同样的问题：在我使用CSS转换比例构建的几个网站上，当您第一次将鼠标悬停在图像上时，会出现闪烁现象。之后他们很好。不会发生在任何其他浏览器上，并且只是最近 - 显然是更高版本的FF中的错误。

无论如何，只需通过修改灰度过滤器来修复它。在你的img上试试这个CSS：

过滤器：灰度（1％）;

它对颜色没有明显区别，但闪烁消失了！

Answer 2

backface-visibility: hidden倾向于解决许多闪烁问题，试着试一试。

Answer 3

尝试推杆：

will-change: transform;

进入.contact

这会将您的对象预渲染为3d，因此它不会闪烁。

有时将它放入班上的孩子也很有帮助，就像你有的一样 .contact > .img或其他什么。

Answer 4

为Firefox添加-moz-transition:我在这里有代码更新试一试它应该工作

.contact{
    width: 300px;
    height: 250px;
    margin: 10px;
    margin-top: 37px;
    float: right;
    background-color: #eca83b;
    border-radius: 10%;
    transition: 0.5s;
    -moz-transition: 0.5s;
}

.contact:hover{
    width: 320px;
    margin: 0px;
    margin-top: 27px;
    height: 260px;
}

Answer 5

这些都不适合我，但是我通过在非活动图像上设置visibility:hidden; position: absolute;和在活动图像上设置visibility: visible; position: relative;来解决此问题。

Firefox中的CSS过渡闪烁

5 个答案: