This ones been in the queue for a while, but just now getting back to it. It's a strange one that I can reproduce quite readily on Chrome on OSX, but can't seem to find any other cases of on the Googles.
Let's take the following CSS3 declaration:
label.ghost.focused {
-webkit-transition: opacity,color 1000ms linear;
}
When a label with the class ghost has the class focused added to it (or vice
versa), the opacity and color for that node ought to follow a linear transition
over a 1000 millisecond duration.
But it doesn't. But guess what? This does work:
label.ghost.focused {
-webkit-transition: color,opacity 1000ms linear;
}
Can you spot the difference? It's the ordering of the transition properties. In
my case, I found putting color before opacity did the trick. Don't ask me
how I found that out, or how long it took. It nonetheless worked.
I've tried doing some research as to why that might be, but to no avail. Alphabetical order? Honestly no clue, but I wanted to write it out both for myself, and for others who may Google to find issues relating to this problem.
I'll follow up with an update if I can find any spec-declarations down the line detailing why this might be.