在子级变换缩放期间未应用 CSS 父级边框半径

Question

我正在研究砖石类型布局，其中有一个带有column-count属性的容器，然后是带有圆角的保存图像的项目。我希望图像transform: scale在悬停时有一点效果，但是通过这种 css 组合，圆形边框在过渡过程中消失。

有什么办法解决吗？

.container {
  column-count: 2;
}

.item {
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
}

img {
  max-width: 100%;
  max-height: 100%;
  transition: all 0.2s;
}

img:hover {
  transform: scale(1.1);
}

<div class="container">

  <div class="item">
    <img src="https://images.unsplash.com/photo-1558834643-1dacaf774843?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60">
  </div>
</div>

Answer 1

更新：最近，这种情况似乎再次发生，但仅限于使用 CSS 列的元素。我已将其作为 Chromium bug在这里提交。

更新 2：提交的错误已被关闭为“无法修复”，因为它已经存在于v75.*和之间v77.0.3833.0，目前没有关于导致该错误的原因以及修复该错误的原因的可用信息。

默认情况下，transform不会在每个动画帧触发父节点上的重绘，这正是为什么它是推荐的动画方法opacity（具有相同的行为）。

但就您而言，您希望在每一帧之后重新绘制。因此，您还需要对父级应用廉价的转换。

对于您的情况，一个简单的rotate(0)就足够了，但请注意，有些情况下您希望保持 3d 引擎运行，在这种情况下，一个好的候选者是rotateZ(0).

此外，为了确保图像底部与其包装之间没有空间，您可以应用display:block到<img>：

.container {
  column-count: 2;
}

.item {
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
  transform: rotate(0);
}

img {
  max-width: 100%;
  max-height: 100%;
  transition: all 0.2s;
  display: block;
  min-width: 100%;
}

img:hover {
  transform: scale(1.1);
}

<div class="container">

  <div class="item">
    <img src="https://images.unsplash.com/photo-1558834643-1dacaf774843?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60">
  </div>
</div>

建议：由于这似乎与 using 没有直接关系column-count，我建议将其从标题中删除，以增加其索引并帮助其他人，遇到同样的问题但不使用column-count，找到它更容易。

我想说这完全是关于border-radius在子项期间不应用父项transform。