Chrome bug - border radius not clipping contents when combined with css transition

Question

My issue is that during CSS transition border-radius temporarily stops clipping elements inside if transition of overlapping element involves transform. In my case I have two divs absolutely positioned one above the other where the first one has transition triggered by action on clicking a navigation element inside the second one, like:

<div id="below"></div>
<div id="above"><div id="nav"></div></div>

The above div has border-radius: 50% and clips the nav div. In CSS it goes like (minimal example, original onclick action illustrated as :hover):

#below {
    position: absolute; width: 250px; height: 250px;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
}
#below:hover {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
#above {
    position: absolute;
    width: 200px; height: 200px;
    border-radius: 50%;
    overflow: hidden;
}
#nav {
    width: 40px;
    height: 200px;
    background-color: rgba(0,0,0,0.3);
}

Of course it is better visible in http://jsfiddle.net/UhAVG/ with some additional styling for better illustration. This works as expected in IE10+ and FF25, also in Chrome 31 and 32 with hardware acceleration disabled. In result only accelerated Chrome shows this unwanted behaviour. So I'm wondering if it's possible to workaround it somehow using current CSS3 techniques.

Answer 1

After some more experiments I've finally found the solution. Sometimes simple ones are the hardest to find. In this case #above {z-index: 1;} (like in http://jsfiddle.net/UhAVG/1/) solves the issue. Wild guess is that z-index prevents some optimization that combines operations from single layer and doing so mistakenly optimizes out applying border-radius on element. With layers separated this is no longer the case.