Chrome screen flash when applying a CSS3 animation (only the first time)

Question

EDIT: The answer from @Archer seems to fix this. (please vote him up, because I don't have enough points to do that).
To learn more about the bug click here: http://www.viget.com/inspire/webkit-transform-kill-the-flash/

---

My problem is not easy to explain. I have made up a test case on jsfiddle. You can find the link on the bottom of this text.

Before you click on the demo link be aware of the following:

Be sure you are using google chrome. (because of -webkit prefixes in the CSS).

Pay attention the first time you click the orange button. You should see a sort of short flash before the animation starts. When you try again (after clicking on the reset button) everything is ok, no flashing screen. But if you clear your browser cache (CTRL-SHIFT-DEL), close the browser, and reload the page, the hiccup is there again.
I hope i explained it clearly.

DEMO: http://jsfiddle.net/NKQNX/14/

(sorry for my spelling, english isn't my first language)

Answer 1

Apparently, it's a known issue with webkit animations. A bit of googling came up with this...

body {
    -webkit-transform: translate3d(0, 0, 0);
}

I added that to the css in your example and tried it about 10 times and didn't get the flicker once, where I was able to consistently get it before.

http://jsfiddle.net/NKQNX/16/