<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),画布在圆角处仍然可见：

有趣的是,这个问题似乎只在内部元素是画布时才会发生.对于任何其他子元素,正确隐藏内容.

一种解决方法是将相同的圆角应用于画布本身,但不幸的是,这是不可能的,因为我需要为画布相对位置设置动画.

应该工作的另一个解决方法是在类似于圆角形状的剪切区域中重绘画布,但我更喜欢更干净的CSS3解决方案.

那么,是否知道如何在Mac上修复Safari和Chrome？

编辑：在Win7上的Chrome中也会出现问题

jsFiddle here