My HTML contains several <a> tags that have different images as backgrounds. I want these <a> elements to move across the page in an animated manner and have a grayscale filter applied to them. When hovered over, they should return to their original state without the grayscale effect.
However, there seems to be an issue in the latest version of Chrome where the animation CSS rule interferes with the transition. The problem can be seen in the code snippet below. When hovering over the animated <div> elements for the first time, instead of transitioning smoothly, they instantly jump to the end animation state, which is filter: none. Changing the hovered CSS to filter: grayscale(0) does not resolve this problem.
If you continuously move your mouse in and out of the bounds of the <div> elements, the transition appears to work correctly. However, if you wait too long or try hovering over the other <div>, the transition breaks again.
I have tested this functionality in Firefox and Brave browsers, and it works fine. I remember implementing this feature on my website and testing it in Chrome where it worked initially. It seems like something has broken in the browser since then. I am unsure how to fix this issue or find a temporary workaround if it is indeed a bug in 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>