如何修复悬停时CSS转换添加的白线？

是否有人发现或知道出现在元素上的白线/边框的工作修复程序，该元素使用CSS缩放悬停进行转换

我尝试了以下方法：

transform:translateZ（0）

，

-webkit背面可见性：hidden

，

变换样式：preserve-3d

，但没有任何帮助

在非视网膜显示器上可以很好地看到该缺陷

对于那些看不到bug的人，你会注意到图片底部有一条1px的线

部分{
填充：100px0；
}
身材{
保证金：0；
溢出：隐藏；
}
图：之前{
位置：绝对位置；
z指数：2；
内容：''；
宽度：100%；
身高：100%；
背景：rgba（43,43,54,0.3）；
过渡：背景0.7s三次贝塞尔（0.2,1,0.2,1）；
}
.ct图像容器{
显示器：flex；
位置：相对位置；
变换：scale3d（1,1,1）；
变换：变换0.7s三次贝塞尔（0.2,1,0.2,1）；
}
.ct图像容器img{
位置：绝对位置；
宽度：100%；
身高：100%；
最大宽度：100%；
最大高度：100%；
对象匹配：覆盖；
对象位置：中心；
}
文章：悬停图：前{
背景：rgba（43,43,54,0.7）；
}
文章：hover.ct图像容器{
转换：scale3d（1.1,1.1,1）；
}

文件

添加

背面可见性：隐藏到你的img标签似乎可以解决这个问题

我将使用这种方法：

一定要注释掉下面的CSS

img {
    position: absolute;
    width: 100%;
    height: 100%;

    /* max-width: 100%; */
    /* max-height: 100%; */
    /* object-fit: cover; */
    /* object-position: center center; */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

应该修好它
 请将代码包含在您的帖子中。@TomM刚刚添加了代码。问题出现在哪些浏览器中？@IlyaStreltsyn抱歉，我忘了提及。这个问题似乎只存在于Chrome中。我在Chrome 62.0.3202.62和Chrome Canary 64.0.3248.0中测试了这个，我遇到了完全相同的问题。