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 错误 here。

更新 2：已提交的错误已作为 "Won't fix" 关闭，因为它已经介于 v75.* 和 v77.0.3833.0 之间，目前没有关于导致它的原因和修复它的信息.

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

但在您的情况下，您希望在每一帧之后重新绘制。所以你还需要在 parent 上应用一个廉价的转换。

在您的情况下，一个简单的 rotate(0) 就足够了，但请注意，有些情况下您想要保留 3d 引擎运行，在这种情况下，rotateZ(0) 是一个不错的选择.

此外，为确保图像底部和包装纸之间没有 space，您可以将 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>

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

我想说的是 parent border-radius 在 child 项 transform 期间没有应用 transform。

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

CSS parent border-radius not being applied during transform scale of child

html

css

css-transforms