html - 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>