Firefox 中的 CSS 过渡闪烁

Posted 2023-03-06

【中文标题】Firefox 中的 CSS 过渡闪烁

【英文标题】：CSS transition flickering in Firefox

【发布时间】：2015-08-05 08:59:04

【问题描述】：

我有 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>

什么会导致这个问题？

【问题讨论】：

我没有看到任何闪烁

最好定义你正在转换的 wat：transition: all 0.5s;，transition: width 0.5s, height 0.5s;，在这里阅读你可以定义的内容：w3.org/TR/css3-transitions/#animatable-properties

【参考方案1】：

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

【参考方案2】：

试一下：

will-change: transform;

进入你的.contact

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

有时将其放入班级的孩子中也会有所帮助，例如，如果您有 .contact > .img 什么的。

【讨论】：

这就是答案，谢谢！ 注意： MDN reference 说：will-change is intended to be used as a last resort, in order to try to deal with existing performance problems. It should not be used to anticipate performance problems.

【参考方案3】：

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

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

滤镜：灰度（1%）；

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

【讨论】：

其实连加滤镜：grayscale(0%);对我有用。

遗憾的是，2020 年 FF 81 仍然存在这个问题。添加 filter: grayscale(1%) 对我没有任何帮助，但它让我走上了添加有效的道路：filter: blur(0.1px);跨度>

【参考方案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;

【参考方案5】：

backface-visibility: hidden 倾向于解决很多闪烁问题，试试看。