How to hide canvas content from parent rounded corners in any webkit for Mac?
Posted
by
Jose Rui Santos
on Stack Overflow
See other posts from Stack Overflow
or by Jose Rui Santos
Published on 2012-05-16T10:28:45Z
Indexed on
2012/09/09
3:38 UTC
Read the original article
Hit count: 157
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
© Stack Overflow or respective owner