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

【问题标题】：CSS: Column Count + Transform + Scale + Transition = strange behaviorCSS：列数 + 变换 + 缩放 + 过渡 = 奇怪的行为
【发布时间】：2018-10-31 00:50:01
【问题描述】：

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

我想知道为什么我的解决方案不起作用并在这里找到了这个答案： picture with border-radius 50% and transform(scale)

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

有谁知道为什么图像在列数为 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>

【问题讨论】：

似乎是 Chrome 问题； “奇怪”部分在 Firefox 和 IE 11 中都可以正常工作，但在 Chrome 上失败。
如果您需要解释，请参见此处：stackoverflow.com/questions/31693219/… 作为解决方案：向您的hop_circle_img 添加一个不执行任何操作的转换 - 例如transform: scale(1);

标签： css css-transitions

【解决方案1】：

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

transform: translateX(0);

或

transform: translateY(0);

或

transform: scale(1);

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

【讨论】：

完美运行。非常感谢