How to hide canvas contents from parent rounded corners in any webkit for Mac?

Question

I have a parent rounded div that contains 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 displays a red rectangle that overflows the parent. As expected, this is what I get in all browsers:

Problem:

However, for webkit browsers running on Mac OS lion (I tested Safari 5.1.5 and Chrome 19), the canvas is still displayed in round corners:

Interestingly, this problem only occurs if the inner element is canvas . For any other child, the content is correctly hidden.

One way would be to apply the same rounded corners to the canvas itself, but unfortunately this is not possible since I need to animate the relative position of the canvas.

Another workaround that should work is to redraw the canvas in a cropped area that resembles the shape of rounded corners, but I would prefer a cleaner CSS3 solution.

So, do you know how to fix this for Safari and Chrome on Mac?

EDIT : The problem also occurs in Chrome on Win7

jsFiddle here

Answer 1

The error still exists (11/2015), but another way is to add position: relative; into the overflow:hidden; element overflow:hidden; .

Answer 2

Here is the code to add to 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 */ } data: image / png; base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA + oJAAAAAElFTkSuQmCC); #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 JQuery

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

Answer 3

Problem 137818: Large canvas does not respect div border-radius frames

I solved this with a CSS tag to the parent div:

 transform: translate3d(0,0,0); 

it works with the current version of chrome 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 4

Here is what I learned:

In a canvas element, when multiplying width by height is 66000 or more, the canvas ignores the parent overflow property.

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

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

This works well:

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

I found this error report report after googling for "canvas 66000". This is not due to overflow, but I am sure that it is the same error.

Thanks for Jeemusu pointing me in the right direction.

Answer 5

Is canvas used to use width / height value? If you set the canvas height in html to a lower value or even delete everything together, it gets cropped (only in Chrome).

http://jsfiddle.net/LwZ6v/

Answer 6

I found asfwer for Safari. Add a webkit mask with a single pixel png to the parent element, and cropping the overflowing parts will look great.

 -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); 

JsFiddle example

Answer 7

Here is an example in Chrome and Safari. Still buggy.