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

问题

I'm working on a masonry type layout where I have a container with a column-count property, and then items with rounded corners that hold images. I want the images to give a little transform: scale on hover, but with this combination of css the rounded borders disappear during the transition.

Is there any way around it?

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

回答1:

Update: As of late, this seems to be happening again, but only in elements using CSS columns. I've filed it as a Chromium bug here.

Update 2: Filed bug was closed as "Won't fix" as it has already been somewhere between v75.* and v77.0.3833.0, there's currently no available info on what caused it and what fixed it.

By default, transform does not trigger a repaint on the parent node at each animation frame, which is precisely why it's the recommended method of animation, along with opacity (which has the same behavior).

But in your case, you want this repaint after each frame. So you need to apply a cheap transform on the parent as well.

In your case, a simple rotate(0) will suffice, but note there are cases when you want to keep the 3d engine running, in which case a good candidate is rotateZ(0).

Additionally, to make sure there's no space between the bottom of the image and it's wrapper, you could apply display:block to the <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>

Suggestion: since this doesn't seem to be directly related with using column-count, I suggest removing it from title, to increase its indexing and help others, with the same problem but not using column-count, find it easier.

I'd say it's strictly about parent border-radius not being applied during child item transform.

来源：https://stackoverflow.com/questions/56313946/css-parent-border-radius-not-being-applied-during-transform-scale-of-child

标签

html

css

css3

css-transforms