CSS animation causes filter transition to break (in chrome)

Question

I have several <a> in my html which are styled to have various images for their backgrounds. The desired behavior is for these <a> to be animated and scrolling across the page, as well as to have a grayscale filter applied. Then, when they are hovered they revert to normal, non-grayscale mode.

Unfortunately, in the latest version of chrome the animation css rule seems to interfere with the transition. I have reproduced the error in the code snippet below. Notice that upon first hovering over either of the animated <div> s, they will not transition to reveal their color, but rather jump to the end animation state (namely, filter: none ) instantly. And no, making the hovered css say filter: grayscale(0) instead of filter: none does not fix it.

If immediately after this you move your mouse in an out of the <div> s bounds repeatedly, you will notice the transition appearing to work normally. However if you move your mouse away for too long or try the other <div> , the transition breaks again.

I have not found this to be an issue in Firefox or Brave, but what's more I seem to remember that when I implemented this feature in my site I tested it in chrome and it worked , so it must have been broken in the meantime. I'm really stumped on how I might be able to fix this, or in the case that it is a bug in chrome at least work around it temporarily.

 .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

Turns out is was a bug in chrome. The version in which I was encountering the error was Version 102.0.5005.115 , 64-bit.

As misterManSam pointed out, updating seems to solve the issue. After relaunching chrome to finish the update (now using Version 103.0.5060.66 ) the transition behaves as expected.

I assumed I had the latest version since chrome was not asking me to update, but annoyingly only by going to chrome://settings/help was I able to see that I had to restart chrome to finish updating. For anyone facing this issue, make sure your browser is fully updated by relaunching.