[Animated Buttons] should animate in Chrome

[5t4r8ucK]

I used dragonfire1119's solution for card shuffling found here: #3353 (comment). Originally it worked fine but when I added animated buttons to the cards the text and animations completely disappeared in Chrome/Opera. Works fine in FF.

I noticed that when I removed the 'display: block' property the animations were back however that defeats the whole purpose of creating a masonry like layout. The only solution for this bug that I found is to add this to my CSS:

.ui.animated.button {
will-change: contents;
z-index: initial;
}

I'm not 100% certain why this works and why the original doesn't. Is this perhaps a Chrome bug? It does after all work in FF just fine. Also is there a reason for why the z-index is set to 1 initially? Will setting it to 'initial' break something else down the line?

Steps

1. Set up the layout in the same way as the layout in the above link.
2. Open in Chrome
3. Hover over any button with the animated class.

Expected Result

The hover animation should show up in Chrome like it does in FF.

Actual Result

No text or animation is displayed in Chrome upon hover.

Version

2.4

Testcase

https://jsfiddle.net/St4r8ucK/cr4qwm29/5/

[y0hami]

I can't seem to reproduce this, the animations work for me.

[y0hami]

@lubber-de I just checked again and I see it now 🤔

[5t4r8ucK]

Ah I forgot one more thing - the reason for the 'will-change'. If the animated buttons are disabled and that property is not set to 'contents' then the text in the disabled animated buttons disappears. Also the animation still doesn't show up in the disabled buttons if tabbed to even with that setting on. I added that example to the jfiddle so this is a new link (and changed the z-index to auto):
https://jsfiddle.net/St4r8ucK/cr4qwm29/15/