CSS animation causes filter transition to break (in chrome)-CodePudding

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 >TEST1</div>
<div >TEST2</div>
<br>
<div >noanim</div>
<div >noanim</div>

CodePudding user response：

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.