Firefox中的CSS过渡闪烁

Question

我有3个元素正在:hover使用CSS过渡.其中两个工作得很好,但最后一个在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什么。