在另一个元素上添加动画时，不会考虑边框半径和溢出

Question

在CSS3中使用transform时，我有一种奇怪的行为。

这是我的代码：

＆＃13;

＆＃13;

*, *:before, *:after {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.btn_exchange a {
    position: relative;
    text-decoration: none;
    display: block;
    width: 150px;
    float: left;
    color: #ffffff;
    font-size: 14px;
    background: #0ea2d3;
    box-shadow: 0 3px 0 0 rgba(7, 154, 190, 0.75);
    text-align: center;
    font-weight: bold;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

@-webkit-keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

a.abc {
    z-index: 0;
    -webkit-animation: pulse 1s linear 0s infinite alternate;
    animation: pulse 1s linear infinite;
}

#box_avatar {
    position: relative;
    margin: 0 auto;
    -webkit-border-radius: 62.5px;
    -moz-border-radius: 62.5px;
    -ms-border-radius: 62.5px;
    -o-border-radius: 62.5px;
    border-radius: 62.5px;
    width: 125px;
    height: 125px;
    border: 2px solid #ccc;
    display: block;
    overflow: hidden;
}

#img_avatar {
    width: 125px;
    height: 125px;
    cursor: pointer;
    border-radius: 62.5px;
}

#bg_gray {
    background: #4c4747;
    width: 100%;
    position: absolute;
    bottom: 0;
    padding: 8px 0 10px 0;
    opacity: 0.8;
}

#bg_gray img {
    display: block;
    width: 20px;
    margin: 0 auto;
}

＆＃13;

<div class="btn_exchange fl bad">
  <a class="button abc" href="#">Button</a>
</div>

<div id="box_avatar">
  <img id="img_avatar" src="http://i.imgur.com/O29DJOZ.jpg" alt="avatar" />
  <div id="bg_gray">
    <img src="http://i.imgur.com/m5qIRID.png" alt="btn_camera" />
  </div>
</div>

<div class="btn_exchange fl good">
  <a class="button abc" href="#">Button</a>
</div>

＆＃13;

＆＃13;

＆＃13;

当我使用.bad div（删除.good div）时会出现问题，然后包含相机图标的灰色背景不会出现在圆圈图像中。

如果我删除CSS中的动画transform，该按钮不再是脉冲，但灰色背景将位于圆圈图像内。

任何人都知道它是什么以及如何解决它？

Answer 1

这个问题与 I had answered earlier非常相似。具有相机图标的灰色框不包含在圆圈内（未被圆圈裁剪）的原因在于如何创建图层并且由浏览器执行加速渲染。您可以在我之前链接的答案中找到有关它的更多信息。

<强>解决方案：

问题的解决方案是通过为其设置更高的z-index值，将脉冲按钮移动到更高的层。在下面的代码片段中，我将其设置为1，您可以看到它解决了问题。

＆＃13;

＆＃13;

*, *:before, *:after {
  box-sizing: border-box;
}
.btn_exchange a {
  position: relative;
  display: block;
  float: left;
  width: 150px;
  color: #ffffff;
  font-size: 14px;
  text-decoration: none;
  text-align: center;
  font-weight: bold;
  background: #0ea2d3;
  box-shadow: 0 3px 0 0 rgba(7, 154, 190, 0.75);
}
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
a.abc {
  z-index: 1;
  animation: pulse 1s linear infinite;
}
#box_avatar {
  position: relative;
  display: block;
  width: 125px;
  height: 125px;
  margin: 0 auto;
  border-radius: 62.5px;
  border: 2px solid #ccc;
  overflow: hidden;
}
#img_avatar {
  width: 125px;
  height: 125px;
  border-radius: 62.5px;
  cursor: pointer;
}
#bg_gray {
  position: absolute;
  width: 100%;
  bottom: 0;
  padding: 8px 0 10px 0;
  background: #4c4747;
  opacity: 0.8;
}
#bg_gray img {
  display: block;
  width: 20px;
  margin: 0 auto;
}

＆＃13;

<div class="btn_exchange fl bad">
  <a class="button abc" href="#">Button</a>
</div>

<div id="box_avatar">
  <img id="img_avatar" src="http://i.imgur.com/O29DJOZ.jpg" alt="avatar" />
  <div id="bg_gray">
    <img src="http://i.imgur.com/m5qIRID.png" alt="btn_camera" />
  </div>
</div>

<div class="btn_exchange fl good">
  <a class="button abc" href="#">Button</a>
</div>

＆＃13;

＆＃13;

＆＃13;

为z-index申请#box_avatar也可以解决问题。

<强>原因：

渲染和合成很难解释，但如果z-index没有设置z-index: 0或a.abc，会发生以下情况：

• a.abc获取自己的渲染和合成图层，因为它具有动画变换和显式定位属性。
• 渲染和合成图层创建过程在this article中进行了说明。通过启用＆＃34; Show Paint Rects＆＃34;可以看到图层。和＆＃34;显示合成图层边框＆＃34;在开发工具中。
• #box_avatar和#bg_gray也会获得自己的合成图层。 #box_avatar似乎是获得一个单独的图层，因为它有一个等于或低于z-index的兄弟姐妹。
• 我无法准确找出#bg_gray获取单独图层的原因，但似乎主要是因为z-index: auto创建了单独的堆叠上下文。 （Source - W3C Spec）

为#box_avatar，#bg_gray创建不同的图层并将它们放在另一个图层的顶部时，#bg_gray并非 > #box_avatar因此不尊重overflow和border-radius。这有点像将两层纸放在另一层之上。

解决方案的详细说明：

在z-index: 1元素上分配a.abc时：

• a.abc获得了自己的渲染和合成图层，因为它有一个动画变换。
• a.abc的容器也会获取其图层，因为它有一个具有合成图层的子图层。
• #box_avatar和#bg_gray都没有单独的合成图层，因为它们不符合为获取合成图层而定义的任何条件。

在z-index: 0上分配a.abc并在z-index: 1上分配#box_avatar时：

• a.abc获得了自己的渲染和合成图层，因为它有一个动画变换
• a.abc的容器也会获取其图层，因为它有一个具有合成图层的子项
• #box_avatar获得了自己的渲染和合成图层，因为它有一个兄弟（a.abc元素的容器），它有一个低z-index的合成图层。
• #bg_gray成为#box_avatar元素图层的一部分，并且没有单独的图层。

在上述两种情况下，由于#box_avatar和#bg_gray没有获得单独的图层，因此它们会被涂在一起，因此#bg_gray知道要裁剪的位置。

Answer 2

我看了一下，看不出它为什么会这样，所以如果跳过img元素并使用背景图片可以吗？

如果是这样，这里有一个可行的样本。

另一种选择是合并background和pseudo而不是img。这将为您提供更清晰的html结构，并解决您的问题。

＆＃13;

＆＃13;

*, *:before, *:after {
    box-sizing: border-box;
}

.btn_exchange a {
    position: relative;
    text-decoration: none;
    display: block;
    width: 150px;
    float: left;
    color: #ffffff;
    font-size: 14px;
    background: #0ea2d3;
    box-shadow: 0 3px 0 0 rgba(7, 154, 190, 0.75);
    text-align: center;
    font-weight: bold;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

@-webkit-keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

a.abc {
    z-index: 0;
    animation: pulse 1s linear infinite;
}

#box_avatar {
    position: relative;
    margin: 0 auto;
    border-radius: 62.5px;
    width: 125px;
    height: 125px;
    border: 2px solid #ccc;
    display: block;
    overflow: hidden;
    background: url(http://i.imgur.com/O29DJOZ.jpg);
    cursor: pointer;
}

#bg_gray {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30px;
    position: absolute;
    overflow: hidden;
    cursor: auto;
}
#bg_gray:before {
    content: "";
    background: #4c4747;
    width: 100%;
    height: 125px;
    bottom: 0;
    position: absolute;
    opacity: 0.8;
    border-radius: 62.5px;
}
#bg_gray:after {
    content: "";
    width: 100%;
    height: 30px;
    bottom: 0;
    position: absolute;
    background: url(http://i.imgur.com/m5qIRID.png) center center no-repeat;
    background-size: 20px;
}

＆＃13;

<div class="btn_exchange fl bad">
  <a class="button abc" href="#">Button</a>
</div>

<div id="box_avatar">
  <div id="bg_gray"></div>
</div>

<div class="btn_exchange fl good">
  <a class="button abc" href="#">Button</a>
</div>

＆＃13;

＆＃13;

＆＃13;