Webkit not respecting overflow:hidden with border radius

Question

I have a lovely Star Trek Red Alert animation using CSS3. One of my parent elements has a border-radius along with overflow:hidden so that any content is cropped to the shape of the border radius.

This all works fine in Firefox but Webkit browsers leave some child elements hanging outside the cropped area.

Here is my code:

http://jsfiddle.net/doublewombat/EqK6R/embedded/result/

The div with the class name curvedEdges has the border-radius and overflow:hidden. However the blocks left & right of the 'Alert' text hang outside of this radius, even though they are child elements of curvedEdges. Or in plain English, the left and right edges of the animation should be slightly curved (as in Firefox), not dead straight.

So is this a bug in Webkit, or have I got something wrong?

Here it is on YouTube if you don't have a Webkit browser handy...

http://www.youtube.com/watch?v=3vyVy21nWsE

Answer 1

Firstly, what a cool demo!

I had a look around and it seems a problem not on you are having. The second answer to someone else's problem fixed it for me, although this doesn't work for safari. The fix is to use masking:

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

The accepted answer to that same question has another fix, which I think could really help you out, but I couldn't seem to get the right combination of elements and border-radius.

Answer 2

I'd been trying to do the same, and was using border-radius to mask elements to a circle.

I was able to use masking and a radial gradient to achieve the desired affect in Safari 6.0.3 (with transitions in position and size).

Here's the single line of code I added to the container (masking) element:

-webkit-mask-image: -webkit-radial-gradient(circle, white, black);

I thought I would have to use hard color stops, as follows, to get the hard edge:

-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);

However, it works the same without (perhaps someone can enlighten us on why). The clipping is not as smooth as with border-radius, but it beats the heck out of the image unpredictably exceeding the bounds.

You may need to adjust this for use with older versions of Safari/Chrome etc., I haven't tested it on different versions (aka YMMV).