하위 CSS3 전환이 FireFox에서 작동하지 않습니다.

Question

나는 h1 요소와 그 자식 요소가 CSS3 전환을 사용하여 애니메이션되었습니다. 모든 것이 Chrome과 IE 10 이상에서 잘 작동하지만 Firefox에서는 전환 효과가 상위 ​​요소에만 표시되고 하위 요소에는 표시되지 않습니다.

코드는 H1 요소와 스팬 요소가 모두 같은 자신의 전환이 같은

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

과 같습니다

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; 
} 

효과는 여기에서 볼 수있다 : Generic Data Binder Site

여기의 문제는 FireFox의 렌더링 엔진에서 버그 또는주의 사항입니까, 아니면 제가 바보 같은 실수를하는 것과 같은 누락 된 중요한 열쇠입니까?

Answer 1

이것은 내게는 https://bugzilla.mozilla.org/show_bug.cgi?id=625289과 같습니다 : position 값의 변경 (부터 /까지 fixed)은 부모에게 강제로 상자를 재구성합니다. 따라서 이전 스타일 정보가 잃어 버려서 전환되지 않습니다.