Search code examples
htmlcsscross-browserwebkitcss-transitions

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

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.

Solution

  • 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?