CSS Firefox 中的过渡闪烁

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

backface-visibility: hidden 可以解决很多闪烁问题，试试吧。

Answer 2

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

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

无论如何，只是通过更改灰度滤镜来修复它。在你的 img 上试试 CSS：

滤镜：灰度(1%)；

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

Answer 4

尝试放置：

will-change: transform;

进入你的.contact

这会 pre-render 你的 object 变成 3d，所以它不应该闪烁。

有时将它放入您的 class 的 children 中也有帮助，就像您有 .contact > .img 之类的。

Answer 5

None 这些对我有用，但是我通过在非活动图像上设置 visibility:hidden; position: absolute; 和在活动图像上设置 visibility: visible; position: relative; 来解决这个问题。

CSS Firefox 中的过渡闪烁

CSS transition flickering in Firefox

html

css

firefox

css-transitions