Has anyone discovered a fix for the white line or border that appears when an element is transformed with CSS scale on hover?
I've tried various solutions such as: transform: translateZ(0),
-webkit-backface-visibility: hiddentransform-style: preserve-3d, but nothing seems to work.
This issue is particularly noticeable on non-retina displays.
You can view a video here for those who may not see the problem, where you'll notice a 1px line at the bottom of the image.
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>For my code example, check out this JSFiddle link.
If anyone has any insights on how to resolve this issue, your help would be greatly appreciated.