title: Chrome bug - border radius not clipping contents when combined with css transition
body: <p>My issue is that during CSS transition <code>border-radius</code> temporarily stops clipping elements inside if transition of overlapping element involves <code>transform</code>. In my case I have two <code>div</code>s 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:</p>
  
  <pre><code>&lt;div id="below"&gt;&lt;/div&gt;
  &lt;div id="above"&gt;&lt;div id="nav"&gt;&lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>The <em>above</em> <code>div</code> has <code>border-radius: 50%</code> and clips the <em>nav</em> <code>div</code>. In CSS it goes like (minimal example, original <code>onclick</code> action illustrated as <code>:hover</code>):</p>
  
  <pre><code>#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);
  }
  </code></pre>
  
  <p>Of course it is better visible in <a href="http://jsfiddle.net/UhAVG/">http://jsfiddle.net/UhAVG/</a> 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.</p>