Webkitでは、次のフィドルが期待どおりに機能します。つまり、#navigationの左側のパディングは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%;
}
親要素の位置の変化に関係しているようです。上記のように、親要素からposition:fixedを削除すると、Firefoxでトランジションが機能します。
http://jsfiddle.net/threehz/JEMN6/28/
問題は、私が達成しようとしていることのために、ヘッダーを固定する必要があり、子のパディングプロパティを遷移させる必要があるため、位置を削除するだけです。固定はオプションではありません。
考え?