css - How to hide canvas content from parent rounded corners in any webkit for Mac?

Question

I have a parent div with rounded corners that contains a canvas:

<div id="box">
    <canvas width="300px" height="300px"></canvas>
</div>?

#box {
    width: 150px;
    height: 150px;
    background-color: blue;
    border-radius: 50px;
    overflow: hidden;
}?

The canvas renders a red rectangle that overflows the parent. As expected, this is what I get in all browsers:

The problem:

However, for webkit browsers running in Mac OS lion (I tested Safari 5.1.5 and Chrome 19), the canvas is still visible in the round corners:

Interestingly, this problem seems to happen only when the inner element is a canvas. For any other child element, the content is correctly hidden.

One workaround would be to apply the same rounded corners to the canvas itself, but unfortunately this is not possible, since I need to animate the canvas relative position.

Another workaround that should work, is to redraw the canvas in a clipped region that resembles the rounded corners shape, but I would prefer a cleaner CSS3 solution.

So, does one know how to fix this for Safari and Chrome on Mac?

EDIT: Problem also happens in Chrome on Win7

jsFiddle here

Answer 1

Issue 137818: Large canvas does not honor containing div's border-radius

I solved this with CSS tag to parent div to:

transform: translate3d(0,0,0);

it works on the current chrome version 36.0.1985.143 m

jsfiddle.net/PJqXY/38/

#box {
    width: 150px;
    height: 150px;
    background-color: blue;
    border-radius: 50px;
    overflow: hidden;
    transform: translate3d(0,0,0);
}