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

Solution 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);
}

<divclass="container"><divclass="item"><imgsrc="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.