Child CSS3 transitions not working in FireFox

Question

I have an h1 element and its child element animated using CSS3 transitions. Everything works well in Chrome and even IE 10+, but in Firefox the transition effects are only seen in the parent element and not the child element.

The code is as such

<h1>G<span>eneric</span> D<span>ata</span> B<span>inder</span></h1>

Where the h1 element and the span element both have their own transitions as such:

h1{
    transition: all 800ms;
    -moz-transition: all 800ms;
    -webkit-transition: all 800ms;
    -ms-transition: all 800ms;
    -o-transition: all 800ms;
    transition-property: line-height,width,font-size;
    -moz-transition-property: line-height,width,font-size;
    -ms-transition-property: line-height,width,font-size;
    white-space: nowrap;
}

h1 span{
    display:inline-block;
    max-width:500px;
    transition: all 800ms;
    -moz-transition: all 800ms;
    -webkit-transition: all 800ms;
    -ms-transition: all 800ms;
    -o-transition: all 800ms;
    transition-property: opacity,max-width;
    -moz-transition-property: opacity,max-width;
    -ms-transition-property: opacity,max-width;
}

The effect can be seen here: Generic Data Binder Site

Is the issue here a bug or caveat in FireFox's rendering engine, or I'm there something key I'm missing such that I'm making a silly mistake?

Answer 1

This looks to me like https://bugzilla.mozilla.org/show_bug.cgi?id=625289: the change in the position value (to/from fixed) on the parent forces box reconstruction, which loses the old style info on the kids, which therefore do not transition.