CSS：列数 + 变换 + 缩放 + 过渡 = 奇怪的行为

Question

我想通过 css 使用缩放来放大容器内的图像，其边界半径为 50% 以模拟圆形。

我想知道为什么我的解决方案不起作用，并在这里找到了这个答案：

我复制了代码并将其应用于我的代码，但该行为仍然存在。

有谁知道当图像位于列数为 2 的容器中时，为什么图像在过渡期间变成了矩形？

.col {
  column-count: 2;
}

img{
  width: 100px;
  height: 100px;
}

.hopp_circle_img {
  width: 100px !important;
  height: 100px !important;
  max-width: 100% !important;
  max-height: 100% !important;
  overflow: hidden;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
}

.hopp_circle_img img {
  transition: all 0.8s;
  -moz-transition: all 0.8s;
  -webkit-transition: all 0.8s;
  -o-transition: all 0.8s;
  -ms-transition: all 0.8s;
}

.hopp_circle_img img:hover {
  display: block;
  z-index: 100;
  transform: scale(1.25);
  -moz-transform: scale(1.25);
  -webkit-transform: scale(1.25);
  -o-transform: scale(1.25);
  -ms-transform: scale(1.25);
}

Strange:<br />
<div class="col">
  <div class="hopp_circle_img">
    <img src="https://images.pexels.com/photos/325185/pexels-photo-325185.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="" />
  </div>
</div>

Works like charm:<br />
  <div class="hopp_circle_img">
    <img src="https://images.pexels.com/photos/325185/pexels-photo-325185.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="" />
  </div>

Answer 1

这是 Chrome 中的错误。添加一个（无用的）transform 到 hop_circle_img 来解决它。例如：

transform: translateX(0);

或

transform: translateY(0);

或

transform: scale(1);

以下是针对 Chromium 报告的几个相关错误：

CSS：列数 + 变换 + 缩放 + 过渡 = 奇怪的行为

CSS: Column Count + Transform + Scale + Transition = strange behavior

css

css-transitions