CSS:列计数+变换+缩放+转换=奇怪的行为

Question

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

我想知道为什么我的解决方案不起作用，在这里找到了这个答案：边界半径为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报告的几个相关错误：

• https://bugs.chromium.org/p/chromium/issues/detail?id=84030
• https://bugs.chromium.org/p/chromium/issues/detail?id=406349