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

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


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.