animation - 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.