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)