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

It appears to be a browser issue as reported on: https://code.google.com/p/chromium/issues/detail?id=157218

Basically, when you apply animation to an element, the browser will handle it in the GPU (Graphics Processing Unit) for performance reasons, while the rest is handled by the CPU. That ends up rendering the animation above the mask.

As a workaround you can try adding an imperceptible transform property, that will also trigger GPU handling for the mask element, promoting it to the same level of the animation:

#redAlert .curvedEdge {
    -webkit-transform: rotate(0.000001deg);
}

I guess it may vary depending on browser version, but these other values have also been reported to trigger GPU handling: rotate(0), translateZ(0)

Answer 2

Seems its a mixed working fix:

.wrap {
    -webkit-transform: translateZ(0);
    -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
}

http://jsfiddle.net/qWdf6/82/

Answer 3

It seems like its an issue with the GPU/hardware compositing. transform: translateZ(0); should fix the issue as well. For more information on this, read http://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/

-webkit-transform: translateZ(0);
transform: translateZ(0);

I have included vendor prefixes but you can remove them if you want.

Answer 4

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 5

I found another possible solution to this bug, using CSS3 clip-path, but it only works in recent versions of webkit (it seems to work in Chrome 24, but not Safari 6.0.2). The following will clip a circle around the element:

-webkit-clip-path: circle(50%, 50%, 100%);

Hopefully this will be implemented by more browsers soon! It seems like this feature could have a lot of cool applications. Here's a relevant blog post: http://blog.romanliutikov.com/coding/css-clip-path-landed-in-webkit/.

Answer 6

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