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

Question

I was hoping someone could help explain the strange behaviour I'm experiencing in Webkit browsers with unwanted delays in CSS transitions.

Here is a link to the page I'm working on: http://demo.daised.com/help-me

The desired outcome is for the menu bar to shrink as the user scrolls down the page. This animates perfectly in Firefox.

However, in Webkit browsers the transition for font-size of the nav items is delayed by 6(!) seconds.

Thanks for helping me understand this better.

Answer 1

The issue is caused by stacked transitions on elements that inherit the transition property.

a, span {
  transition: 0.5s;
}

a {
  padding: 0.5em 0.75em;
  border: 1px solid red;
  color: #000;
  display: inline-block;
}

a:hover{
  color: #f00;
  background-color: #0f0;
}

<a>
  <span>Text Content</span>
</a>

The section of css a, span applies the transition to both elements. The span inherits the color from the a, but does not apply the animation color until the a has finished its animation.

The best fix for the above example would be to remove the rule for a, span and place transition: 0.5s; inside the rule for a:

a {
  transition: 0.5s;
  padding: 0.5em 0.75em;
  border: 1px solid red;
  color: #000;
  display: inline-block;
}

a:hover{
  color: #f00;
  background-color: #0f0;
}

<a>
   <span>Text Content</span>
</a>

Answer 2

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?