CSS动画导致过滤器过渡中断(在chrome中)

Question

我有几个<a>在我的html样式有不同的图像为他们的背景。期望的行为是让这些<a>动画化并在页面上滚动，以及应用灰度过滤器。然后，当它们悬停时，它们恢复到正常的非灰度模式。

不幸的是，在最新版本的chrome动画css规则似乎干扰过渡。我在下面的代码片段中复制了错误。注意，当第一次将鼠标悬停在任何一个动画<div>上时，它们不会过渡到显示它们的颜色，而是立即跳转到结束动画状态(即filter: none)。不，使悬停的css说filter: grayscale(0)而不是filter: none并不能解决这个问题。

如果在此之后立即将鼠标移出<div>s边界，您将注意到转换似乎正常工作。但是，如果您将鼠标移开太长时间或尝试其他<div>，则转换将再次中断。

我没有发现这在Firefox或Brave中是一个问题，但更重要的是，我似乎记得，当我在我的网站中实现这个功能时，我在chrome中测试了它，它工作，所以它一定在此期间被打破了。我真的被我如何才能解决这个问题难住了，或者在这种情况下，它是一个bug在chrome至少暂时围绕它工作。

.thing {
background-color: red;
width: 50px;
height: 50px;

filter: grayscale(1);
transition: filter 1s;
}
.thing:hover {
filter: none;
}
.broken {
animation: move linear 10s infinite;
}
@keyframes move {
0% {
transform: translateX(0%);
}
50% {
transform: translateX(500%);
}
}

<div class="broken thing">TEST1</div>
<div class="broken thing">TEST2</div>
<br>
<div class="thing">noanim</div>
<div class="thing">noanim</div>

Answer 1

原来这是chrome浏览器的一个bug。我遇到错误的版本是version102.0.5005.115, 64位。

正如mansam所指出的，更新似乎可以解决这个问题。重新启动浏览器来完成后更新(现在使用的版本103.0.5060.66

我以为我有最新的版本，因为chrome没有要求我更新，但令人恼火的是，只有通过chrome://settings/help我才能看到我必须重新启动chrome来完成更新。对于遇到此问题的人，请通过重新启动确保浏览器完全更新。