CSS родительский border-radius не применяется во время масштабирования дочернего элемента - PullRequest
Новая
       18

CSS родительский border-radius не применяется во время масштабирования дочернего элемента

2 голосов
/ 26 мая 2019

Я работаю над макетом типа кладки, где у меня есть контейнер со свойством 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>

1 Ответ

2 голосов
/ 26 мая 2019

Обновление: в последнее время это, кажется, происходит снова, но только в элементах, использующих столбцы CSS. Я подал это как ошибку Chromium здесь .

Обновление 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.

...