Repositioning parent elements prevents CSS3 child transition in Firefox

Question

In Webkit, the following script works as expected. That is, #navigation left padding translates correctly from 0 to 100px.

In Firefox, identical code somehow prevents the transition from happening.

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

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

This seems to be due to a change in the positioning of the parent element. As noted above, if I delete the position: fixed from the parent element, the transition works in Firefox:

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

The problem is that I am trying to execute, the title should become fixed, And the child fill property should go, so just delete the position: not an option fixed.

Thoughts?

Answer 1

The transition is performed if you switch it from Firebug / DevTools. On the other hand:

• Using transform: translate(100px) or position: absolute + left: 100px for li or
• Using Transition Delay

does not work. The transition event is not even fired: / ( http://jsfiddle.net/JEMN6/25/ )

It seems that FF cannot handle the simultaneous redrawing of the #page-navigation container (since position: fixed displays the document flow) and #navigation child , so the transition event is interrupted.

As Alex Morales says, you can use the animation, but you will need the opposite to get the transition when deleting the #fixed class.

Enabling minimum latency via JavaScript is also possible:

 $('#toggle').click('on', function() { $('body').toggleClass('fixed'); setTimeout(function () { $('#navigation').toggleClass('get-padding') }, 20); }); 

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

Not a perfect solution.

Answer 2

It looks like https://bugzilla.mozilla.org/show_bug.cgi?id=625289 for me: the parent will regenerate its CSS fields, which loses the old computed style for the child.