CSS Animation Overflows It's Parent, Despite Overflow: Hidden

Question

I'm trying to do a "material" animation, where a pseudoelement expands on hover.

Demo:

http://codepen.io/Tiger0915/pen/WbxyJB

On hover, a span:after scales up to fill it's parent.

But look closely at the corners of the li during the transition, you can see that it overflows the border-radius.

I have:

li {
  overflow: hidden;
  border-radius: 8px;

  &:hover span:before {
        @include transform(scale(5));
  }
}

But for some reason when it's animating, the overflow: hidden doesn't work on the corners of the li, which are rounded with border-radius.

Why doesn't the overflow: hidden work with my border-radius, only when the transition is happening?

^{Note: This happens only in Chrome.}

Answer 1

I edited your code see results here

it chrome BUG with scale and overflow .

for the container that have the ( overflow:hidden ) add ( in your case its the li )

position:relative;
z-index:1;