CSS动画溢出它的父，尽管溢出：隐藏 [英] CSS Animation Overflows It's Parent, Despite Overflow: Hidden

问题描述

演示：

b

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

在 hover ， span：after 。

但在转换过程中仔细观察 li 的角落，可以看到它溢出 border-radius 。

我有：

  li {
 overflow：hidden; 
 border-radius：8px; 
 
&：hover span：before {
 @include transform（scale（5））; 
} 
} 
  

但是由于某些原因， c $ c> overflow：hidden 不能在 li radius 。

为什么 overflow：hidden

^{注意：这仅发生在Chrome中。}

解决方案

我编辑了您的代码，看到结果这里

it chrome BUG with scale and overflow。

$ b

（溢出：隐藏）
add（在您的情况下为li）

  position：relative; 
 z-index：1; 
  

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

解决方案

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;

这篇关于CSS动画溢出它的父，尽管溢出：隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！