Safari bug using CSS transition-delay and CSS filt

问题:

I'm having an issue with CSS transition-delay not working correctly in Safari when used to transition CSS filters. It works fine in Chrome but in Safari the animation happens then happens again after the delay time has elapsed.

Anyone else seen this before or found a workaround?

Thanks in advance.

https://codepen.io/selfctrl/pen/GRRZeWe

.gray-dog {
    filter: grayscale(0);
    transition: filter 0.5s ease-in-out;
     transition-delay: 1s;
}

.gray-dog:hover {
  filter: grayscale(100%);
}