更改父元素的位置可防止Firefox中的子元素CSS3轉換

Question

在Webkit中，以下小提琴可按預期工作。也就是說，＃導航的左側填充從0到100px正確過渡。

在Firefox中，相同的代碼以某種方式防止了發生的歷史的過渡。

http://jsfiddle.net/threehz/JEMN6/27/

我的CSS：

#navigation { 
    background: #ccc; 
    -webkit-transition: padding-left 0.125s ease; 
    -moz-transition: padding-left 0.125s ease; 
    transition: padding-left 0.125s ease; 
    margin: 0; 
    padding-left: 0; 
    width: 100%; 
} 

.fixed #navigation { 
    padding-left: 100px; 
} 

.fixed #page-navigation { 
    position: fixed; // removing this results in #navigation transition working properly in firefox 
    height: auto; 
    border-top: 1px solid #000; 
    width: 100%; 
} 

現在看來，這是關係到父元素的定位變化。如上所述，如果我刪除位置：從父元素固定，轉型在Firefox：

http://jsfiddle.net/threehz/JEMN6/28/

問題是，對於什麼，我試圖完成，標題必須成爲固定的，孩子填充屬性必須轉換，因此只需刪除該位置：fixed不是一個選項。

想法？

Answer 1

的轉變，如果你從螢火蟲/ DevTools切換它的工作原理。在另一方面：

• 使用了鋰項目transform: translate(100px)或position: absolute + left: 100px或
• 使用過渡延遲

不起作用。過渡事件不會甚至被解僱：/（http://jsfiddle.net/JEMN6/25/）

看來，FF不能處理#page-navigation容器的同時重新劃分（因爲position: fixed就拿文檔流）和#navigation child，所以過渡事件得到中止。

亞歷克斯·莫拉萊斯建議，你可以使用動畫，但在取出#fixed類時，你需要在一個相對得到的過渡。

介紹通過JavaScript最小的延遲也是一個選項：

$('#toggle').click('on', function() { 
    $('body').toggleClass('fixed'); 

    setTimeout(function() { 
    $('#navigation').toggleClass('get-padding') 
    }, 20); 
}); 

http://jsfiddle.net/JEMN6/26/

不是一個理想的解決方案，但。

Answer 2

這看起來像https://bugzilla.mozilla.org/show_bug.cgi?id=625289對我說：父是有其重建CSS盒子，其失去對孩子的舊計算樣式。