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 con

Answer 1

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