如何在 Mac 的任何 webkit 中隐藏父圆角的画布内容？

我有一个父母div带有圆角，其中包含canvas:

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

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

画布呈现一个溢出父级的红色矩形。正如预期的那样，这是我在所有浏览器中得到的结果：

问题：

然而，对于在 Mac OS lion 中运行的 webkit 浏览器（我测试了 Safari 5.1.5 和 Chrome 19），画布在圆角处仍然可见：

有趣的是，这个问题似乎只发生在内部元素是canvas。对于任何其他子元素，内容都被正确隐藏。

一种解决方法是将相同的圆角应用于画布本身，但不幸的是这是不可能的，因为我需要对画布相对位置进行动画处理。

另一个可行的解决方法是在类似于圆角形状的剪切区域中重新绘制画布，但我更喜欢更干净的 CSS3 解决方案。

那么，有人知道如何解决 Mac 上 Safari 和 Chrome 的此问题吗？

EDIT: Win7上的Chrome也会出现这个问题

jsFiddle 在这里 http://jsfiddle.net/ruisoftware/PJqXY/8/

我用父 div 的 CSS 标签解决了这个问题：

transform: translate3d(0,0,0);

它适用于当前的 chrome 版本 36.0.1985.143 m

jsfiddle.net/PJqXY/38 http://jsfiddle.net/PJqXY/38/

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