firefox transitions breaking when parent overflow is changed

Question

i came across an issue today and it took me so long to debug, I couldn't find a solution anywhere online so I thought it would be useful to document

It seems that transitions do not work on Firefox if the parent's "overflow" property is changed together with the transition - ie:

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

The transitions will not work on the child. Remove the "overflow:visible" property from the hovered parent, and everything is ok. It seems that changing the overflow on the child itself does not cause any issues, which is weird.

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

does anyone know why this happens? is it a ff bug or the correct functionality? it works on webkit!

Answer 1

This looks like https://bugzilla.mozilla.org/show_bug.cgi?id=625289 to me: the parent is having its CSS boxes reconstructed, which loses the old computed style on the child, which means no transition start, since that's triggered by computed style changes.