title: Changing parent element's positioning prevents child element CSS3 transition in Firefox
body: <p>In Webkit, the following fiddle works as expected.  That is to say, #navigation's left padding is transitioned properly from 0 to 100px.</p>
  
  <p>In Firefox, the identical code somehow prevents the transition from occuring.</p>
  
  <p><a href="http://jsfiddle.net/threehz/JEMN6/27/" rel="nofollow">http://jsfiddle.net/threehz/JEMN6/27/</a></p>
  
  <p>my css:</p>
  
  <pre><code>#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%;
  }
  </code></pre>
  
  <p>It seems it is related to the parent element's positioning changing.  As noted above, if I remove position: fixed from the parent element, the transition works in Firefox: </p>
  
  <p><a href="http://jsfiddle.net/threehz/JEMN6/28/" rel="nofollow">http://jsfiddle.net/threehz/JEMN6/28/</a></p>
  
  <p>Problem is, for what I am trying to accomplish, the header must become fixed, AND the child padding property must transition, so simply removing the position: fixed is not an option.</p>
  
  <p>Thoughts?</p>