在不同元素上添加动画时不考虑边界半径和溢出

Question

我在 CSS3 中使用 transform 时遇到了一个奇怪的行为。

这是我的代码：

*, *: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;
}

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

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

如果我在 CSS 中删除动画 transform，按钮将不再跳动，但灰色背景将在圆形图像内。

有谁知道它是什么以及如何解决它？

Answer 1

这个问题和that I had answered earlier的问题很相似。带有相机图标的灰色框不包含在圆圈内（未被圆圈裁剪）的原因是因为图层是如何创建的，以及浏览器执行加速渲染的方式。您可以在我之前链接的答案中找到有关它的更多信息。

解决方案：

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

*, *: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;
}

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

为#box_avatar 应用z-index 也可以解决问题。

---

原因：

渲染和合成很难解释，但是当z-index 或z-index: 0 未设置为a.abc 时会发生以下情况：

• a.abc 拥有自己的渲染和合成层，因为它具有动画变换和显式定位属性。
• 渲染和合成层创建过程在this article 中进行了说明。可以通过在开发工具中启用“显示绘制矩形”和“显示复合图层边框”来查看图层。
• #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 结构并解决您的问题。

*, *: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;
}

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