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);
}

Answer 2

Here's the code to add in the css :

 -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); /* this fixes the overflow:hidden in Chrome/Opera */

HTML Source Code

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

Css Source Code

#box {
    width: 150px;
    height: 150px;
    background-color: blue;
    border-radius: 50px;
    overflow: hidden;
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); /* this fixes the overflow:hidden in Chrome/Opera */
}

Javascript Source Code

var $canvas = $("canvas");

if ($canvas[0].getContext) {
    var context = $canvas[0].getContext('2d');
    context.fillStyle = 'red';
    context.fillRect(10, 10, 300, 60);
}

Note : This Need's Jquery

Example : http://jsfiddle.net/PJqXY/12/

Answer 3

Bug still exists (11/2015), but another workaround is to add position: relative; to the overflow:hidden; element.

Answer 4

This is what I found out:

In the canvas element, when the multiplication of width by height is 66000 or greater, the canvas ignores the parent's overflow property.

For example, the following one fails, because 300*220 = 66000

<canvas width="300" height="220"></canvas>

This one works fine:

<canvas width="300" height="219"></canvas>

I've found this bug report after googling for "canvas 66000". It is not related with overflow, but I am sure is the same bug.

Thanks for Jeemusu for pointing me in the right direction.