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 pag

Answer 1

I ran into the same problem. My issue was that I was trying to transition properties that were originally being inherited from a parent. It turns out Webkit browsers (not Firefox) require each property that you're transitioning to actually be applied to that element. It seems they cannot transition properties that have been inherited.

For example, I was trying to do this:

HTML

CSS

.parent {
    color: #000;
}

.child {
    transition: background-color 0.2s ease 0s, color 0.2s ease 0s;
    border-top: 10px #000 solid;
 }

.child.active {
    border-color: #ff0000;
    color: #ff0000;
}

Firefox managed to accomplish this but both Chrome and Safari required this:

.child {
    transition: background-color 0.2s ease 0s, color 0.2s ease 0s;
    border-top: 10px #000 solid;
    // even though the color property is inherited,
    // webkit requires it for transitions
    color: #000;
 }