在子元素缩放时，CSS父边框半径未被应用

Question

在子元素缩放时，CSS父边框半径未被应用

5

我正在制作一种瀑布流式的布局，其中有一个带有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>

- TommyF

将半径应用于图像？ - Temani Afif

如果不起作用，那么比例尺将移动圆角到父级之外，导致非圆角。将其应用于两者会产生与当前行为相同的行为，在转换期间快速闪烁。 - TommyF

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- tao · Accepted Answer

更新：最近似乎又出现了这个问题，但只在使用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>

建议：由于这似乎与使用column-count无直接关系，因此建议将其从标题中删除，以提高索引并帮助其他人更轻松地找到具有相同问题但不是使用column-count的解决方法。

我认为这严格关乎父元素border-radius在子项目transform期间未能应用。