Geek Answers Handbook

Firefox transitions on parent overflow transition

Today I ran into a problem, and it took me so long to debug, I could not find a solution anywhere on the network, so I thought it would be useful to document

The transitions do not seem to work on Firefox if the parent overflow property changes along with the transition - that is:

.parent { overflow: hidden; } .parent:hover { overflow: visible; } .child { opacity: 1; transition: opacity 1s linear; } .parent:hover .child { opacity: 0; }

Transitions will not work for a child. Remove the overflow: visible property from the born soaring parent, and everything is fine. It seems that changing the overflow of the child itself does not cause any problems, which is strange.

Here's the js fiddle for this http://jsfiddle.net/qzMj9/13/

Does anyone know why this is happening? Is it a ff bug or the correct functionality? it works on webkit!

+4
source share
1 answer

It looks like https://bugzilla.mozilla.org/show_bug.cgi?id=625289 : the parent regenerates its CSS fields, which loses the old computed style for the child, which means there is no transition beginning, as this is caused by computed style changes.

+2
source

More articles:


All Articles