Changing parent element's positioning prevents child element CSS3 transition in Firefox

问题

In Webkit, the following fiddle works as expected. That is to say, #navigation's left padding is transitioned properly from 0 to 100px.

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

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

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:

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

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.

Thoughts?

回答1:

The transition works if you toggle it from Firebug/DevTools. In the other hand:

Using transform: translate(100px) or position: absolute + left: 100px for the li items or
Using a transition delay

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

It seems that FF can't handle a simultaneous redrawing of the #page-navigation container (since position: fixed takes it out the document flow) and the #navigation child, so the transition event gets aborted.

As Alex Morales suggests, you could use an animation, but you'd need the opposite one to get a transition when removing the #fixed class.

Introducing a minimal delay through JavaScript is also an option:

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

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

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

Not an ideal solution, though.

回答2:

This looks like https://bugzilla.mozilla.org/show_bug.cgi?id=625289 to me: the parent is having its CSS boxes reconstructed, which loses the old computed style on the child.

来源：https://stackoverflow.com/questions/13371360/changing-parent-elements-positioning-prevents-child-element-css3-transition-in

标签

html

css

firefox

css3

transitions