html - Firefox 中的 CSS 过渡闪烁

Question

我有 3 个元素正在使用 CSS 过渡在 :hover 上生长。其中两个工作正常，但最后一个在 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%)；

颜色没有明显差异，但闪烁消失了!