CSS overflow hidden not working in chrome when parent has border radius and child has animation

Question

live demo: http://codepen.io/flanker/pen/ajAow

There are three elements like:

<div class="parent">
  <div class="child"></div>
</div>

In the first one parent has a border-radius and child element will be overflowed. In the second one parent has a border-radius and overflow: hidden so the child is clipped. Both of them work fine.

But in the third one, the parent element has border-radius and overflow: hidden. This time I added a animation to the child element, then the overflow: hidden is not working in Chrome (Version 28.0.1500.52 beta / Mac OS X 10.8.3). The child is still be visible out of the parent element.

But it works fine in Firefox (20.0)

Is this a Chrome bug? Or am I missing any other CSS properties?

Thanks.

Answer 1

All you have to do is add to the parent element follow css:

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);

Answer 2

Just add overflow: hidden; to your last class?

.flash .bar {
  -webkit-animation: flash 5s linear infinite;
  overflow: hidden;
}

The live demo is updated with this and appears to be working in chrome.