Links inactive on backside of CSS Flip in Chrome

[COLOR=#000000][FONT=verdana]I have a rectangle setup where when you click the main area, it does an animation of it flipping over to reveal the other side of it. This all works correctly.[/FONT][/COLOR]

[COLOR=#000000][FONT=verdana]At the top of each side are links, which display and work properly in Firefox, but in Chrome when it is flipped to reveal the back, the links at the top don’t work (they’re inactive), and although not visible, the links from the front are active. In the fiddle below, you’ll see that I’ve set up a JS alert on each link to make it clear which one is being clicked. In Chrome (v19 and under on Mac and Windows), you’ll see that neither ‘BackLeftLink’ or ‘BackRightLink’ are active. However, if you move your mouse below each of them, you’ll see the mouse go active and clicking will show the alert from the front. For some reason the links from the front are coming through the back…as under ‘BackRightLink’ the link for ‘FrontLeftLink’ is active, and under ‘BackLeftLink’ its the link for ‘FrontRightLink’.[/FONT][/COLOR]

http://jsfiddle.net/adRP4/3/

[COLOR=#000000][FONT=verdana]I have had some colleagues try it in Chrome on their machines, and the ones that have Chrome 19 or lower had the same problem as me, but any using the Chrome 20 (beta) had no problems. Works properly for me in Safari, so doesn’t seem to be a strictly Webkit-based problem either… [/FONT][/COLOR]

[COLOR=#000000][FONT=verdana]Here is a quick screencast demonstrating the problem I am having (in case it works properly for you in Chrome): [/FONT][/COLOR]http://screencast.com/t/2QgbceIDA[COLOR=#000000][FONT=verdana]...desperate to get this fixed, as I need it to work for everyone in all recent versions of FF and Chrome.[/FONT][/COLOR]

[COLOR=#000000][FONT=verdana]Any suggestions would be greatly appreciated.[/FONT][/COLOR]

[COLOR=#000000][FONT=verdana]Thanks![/FONT][/COLOR]