You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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:
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
Set up the layout in the same way as the layout in the above link.
Open in Chrome
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.
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/
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
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/
The text was updated successfully, but these errors were encountered: