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
