CSS overflow is hidden, does not work in chrome when the parent has a border radius and the child has animation

Question

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

There are three elements:

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

The first parent has border-radius , and the child will overflow. In the second, the parent has border-radius and overflow: hidden , so the child is cropped. Both of them work great.

But in the third, the parent element has border-radius and overflow: hidden . This time I added an animation element to a child element, then overflow: hidden does not work in Chrome (version 28.0.1500.52 beta / Mac OS X 10.8.3). The child will still be visible from the parent.

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 the following css to the parent element:

 -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 updates with this and seems to work in chrome.

Answer 3

This seems to be fixed in Chrome 29 (tested in Chrome version 29.0.1547.22).