transition-FOUC in WebKit?

Question

WebKit just kept annoying me very much: upon page load it would animate a transition from the initial , browser-default, value. I had something like

a:link {
    color: black;
    -webkit-transition: color 1s;
}

but it would fade in from color: blue! Other properties weren't affected by the FOUC, only the transitions.

Unfortunately it is super hard to reproduce, I couldn't manage to jsfiddle it. My (admittedly edge) case is setup like so:

1. a "dev" version: a bunch of <script />s and <style type="text/less" />s
2. a production version: scripts and styles H5BP-style concat'ed & minified (first lessced, respectively)

the FOUC would only show up in situation 2, but that stopped after I inlined the @imports of some stylesheets with @font-faces. A workaround, but it

So I guess this must have something to with load times/order?
Anybody ever encountered something like this? (I guess not.)

At the very least, maybe someday somebody will run into this problem, and find this useful.

Answer 1

If I had to guess, I'd say it's because you've put your transition before your color. By doing it that way, you've assigned the transition while the link is the default color (blue), then told it to change color (in theory).

Try putting your transitions last to keep them from transitioning from the browser default values.