Why Is Transition on 'Margin' and 'Padding' Laggy in Webkit Browsers

CSS transitions: Strange unwanted delay in Webkit browsers (Chrome and Safari)

user3360686 is right, your transitions are somehow stacked. I'm not sure why it happens as it's not supposed to.

Anyway what you've done in the header is dangerous, and may trigger weird behaviors :

header * {
  transition: all 0.8s;
  -moz-transition: all 0.8s; 
  -webkit-transition: all 0.8s;
  -o-transition: all 0.8s;

  transition-delay: 0.2s;
  -moz-transition-delay: 0.2s;
  -webkit-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
}

You have about 25 elements in your header, transitions and delays will be applied to each of them. Use specific elements for more efficiency (and elegance).

Using "all" with transition is generally a bad idea, they are a good means to create conflicts. Use specific properties.

This quick and nice answer sums up pretty much everything :
CSS3, WebKit Transition Order? How to queue to the transitions?

Why transitions for some CSS properties are slow and none fluent

As the result my 4 hours experiments it is better to use transform like below:

        -webkit-transform: translate(2000px, 0);
        -webkit-transition: -webkit-transform 1s linear;
        -moz-transform: translate(2000px, 0);
        -moz-transition: -moz-transform 1s linear;
        -ms-transform: translate(2000px, 0);
        -ms-transition: -ms-transform 1s linear;

This was great on IE10, Chrome v21.0.1180.89 and FireFox v15.0.1.

Note: IE9 does not support tarnsforms

Why do webKit browsers render the following with extra padding/margin on the bottom?

<div style="background-color:#efefef; width:200px;">
    <textarea style="display:block;">asdf</textarea>
</div>

Apparently, it has something to do with <textarea> being an inline element. The gap appears to be the area below the baseline. If you set display:block;, it will get rid of the gap.

---

Related Topics