有人找到或知道如何解决悬停时使用CSS scale变换的元素上出现的白色线框吗？
我试过的东西有 transform: translateZ(0), -webkit-backface-visibility: hidden, transform-style: preserve-3d 却无济于事。
这个bug可以很好的在 非视网膜 显示。
下面是一个视频 对于那些看不到bug的人来说，你会注意到在图片底部有一条1px的类似线。
section {
padding: 100px 0;
}
figure {
margin: 0;
overflow: hidden;
}
figure:before {
position: absolute;
z-index: 2;
content: '';
width: 100%;
height: 100%;
background: rgba(43, 43, 54, 0.3);
transition: background 0.7s cubic-bezier(0.2, 1, 0.2, 1);
}
.ct-image-container {
display: flex;
position: relative;
transform: scale3d(1, 1, 1);
transition: transform 0.7s cubic-bezier(0.2, 1, 0.2, 1);
}
.ct-image-container img {
position: absolute;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
object-fit: cover;
object-position: center center;
}
article:hover figure:before {
background: rgba(43, 43, 54, 0.7);
}
article:hover .ct-image-container {
transform: scale3d(1.1, 1.1, 1);
}<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<div class="container">
<div class="row no-gutters">
<article class="col-md-6 col-lg-4 col-xl-4">
<div class="ct-card-inner">
<figure>
<a href="" class="ct-image-container">
<img src="https://images.unsplash.com/photo-1478033394151-c931d5a4bdd6?w=1568&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt="">
<div class="ct-ratio" style="padding-bottom: 133.3%"></div>
</a>
</figure>
</div>
</article>
<article class="col-md-6 col-lg-4 col-xl-4">
<div class="ct-card-inner">
<figure>
<a href="" class="ct-image-container">
<img src="https://images.unsplash.com/photo-1465126188505-4f04a0f23a4d?w=1550&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt="">
<div class="ct-ratio" style="padding-bottom: 133.3%"></div>
</a>
</figure>
</div>
</article>
<article class="col-md-6 col-lg-4 col-xl-4">
<div class="ct-card-inner">
<figure>
<a href="" class="ct-image-container">
<img src="https://images.unsplash.com/photo-1495250357898-6822052ef5b8?w=1650&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt="">
<div class="ct-ratio" style="padding-bottom: 133.3%"></div>
</a>
</figure>
</div>
</article>
<article class="col-md-6 col-lg-4 col-xl-4">
<div class="ct-card-inner">
<figure>
<a href="" class="ct-image-container">
<img src="https://images.unsplash.com/photo-1446080501695-8e929f879f2b?w=1567&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt="">
<div class="ct-ratio" style="padding-bottom: 133.3%"></div>
</a>
</figure>
</div>
</article>
<article class="col-md-6 col-lg-4 col-xl-4">
<div class="ct-card-inner">
<figure>
<a href="" class="ct-image-container">
<img src="https://images.unsplash.com/photo-1506512534708-3737d46bffe1?w=1650&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt="">
<div class="ct-ratio" style="padding-bottom: 133.3%"></div>
</a>
</figure>
</div>
</article>
<article class="col-md-6 col-lg-4 col-xl-4">
<div class="ct-card-inner">
<figure>
<a href="" class="ct-image-container">
<img src="https://images.unsplash.com/photo-1503924087716-07cbd5f49b21?w=1000&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt="">
<div class="ct-ratio" style="padding-bottom: 133.3%"></div>
</a>
</figure>
</div>
</article>
</div>
</div>
</section>
</body>
</html>这里是我的 JSFiddle
请帮我解决这个问题。
添加 backface-visibility: hidden; 到你的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;
}
应该能修好！