CODEWITHSUNDEEP
csshovercss-transitionscss-animationscss-transforms
Brian S
Brian S

Reputation: 121

Why are my css transitions sometimes keeping the hover state after exiting hover?

JSFiddle

CSS transitions have been set up to increase the transform:scale(x) property on hover. It works as intended, but sometimes the elements in play will remain at the increased scale value instead of reverting to the original scale value.

It seems that most of the time, everything works correctly when exiting the hover state of an element. However, on some occasions, exiting hover state on an element will cause another element to "snap" to the hover state.

I'm not sure what's causing this, as it seems to happen at random. If you just mouse over the elements at random you will see it almost right away. (/edit/ - try mousing over an element, then exiting DOWN with your mouse. then come back UP into the content area on top of another element. this seems to be the most consistent way to trigger the issue)

Sorry for the ridiculous-looking example - I had to remove what used to be images because the file paths were sensitive.

/edit/ - It seems that the animation-fill-mode value of forwards was causing this issue, although it is not clear why. Considering that this value is meant to apply to the element its final (100% frame) css values, it doesn't seem like including forwards would cause this issue. In fact, it seems like it should correct it.

Does anyone have any input regarding the cause of this issue? Is it exclusive to Chrome or does it persist in other browsers?

Upvotes: 1

Views: 1143

Answers (1)

vals
vals

Reputation: 64164

I think that it's some kind of bug in Chrome.

The problem seems related to the forwards property in the animation; I removed it and the bug seemed to disappear.

It isn't need anyhow since the 100% keyframe is scale (1, 1) opacity (1)

Upvotes: 1

Related Questions