How do I remove flickering line when using css tranform:scale? - css

Question

I've been trying to remove this ugly flicker when hovering over the images. I've tried adding -webkit-backface-visibility: hidden; to the hover element along with the :hover itself but can't seem to shake it. Seems the promblem is only on Chrome and Safari.
website: http://best-law-firm-sites.com/lawpromo12/
.col-sm-4 {
width: 33.3333%;
float: left;
}
.panel-wrap {
height: 100% !important;
}
.panel-wrap .col-sm-4 {
padding: 0;
}
.hovereffect {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
cursor: default;
}
.hovereffect .overlay {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.hovereffect h2,
.hovereffect img {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.hovereffect img {
display: block;
position: relative;
-webkit-transform: scale(1.001);
-ms-transform: scale(1.001);
-moz-transform: scale(1.001);
-o-transform: scale(1.001);
transform: scale(1.001);
}
.hovereffect:hover img {
-webkit-transform: scale(1.17);
-ms-transform: scale(1.17);
-moz-transform: scale(1.17);
-o-transform: scale(1.17);
transform: scale(1.17);
}
.hovereffect h2 {
bottom: 10%;
color: #fff;
font-size: 30px;
font-weight: 700;
padding: 10px 10px 10px 17px;
position: absolute;
text-align: left;
text-shadow: 2px 3px 6px rgba(0, 0, 0, 1);
text-transform: uppercase;
}
.hovereffect h2::after {
display: block;
content: "";
height: 4px;
width: 75px;
background: #BCA474;
margin: 20px 0 0;
box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.6);
}
.hovereffect a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
text-transform: uppercase;
color: #fff;
margin: 50px 0 0 0;
background-color: transparent;
-webkit-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
font-weight: normal;
height: 100%;
width: 85%;
position: absolute;
top: 0;
left: 0;
padding: 70px;
}
.hovereffect:hover a.info {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
<div class="col-sm-4 panel-1">
<div class="hovereffect">
<img class="img-responsive" src="http://best-law-firm-sites.com/lawpromo12/wp-content/uploads/2016/02/panel1.jpg" alt="">
<div class="overlay">
<h2>Family Law</h2>
<a class="info" href="services/family-law/"></a>
</div>
</div>
</div>
<div class="col-sm-4 panel-2">
<div class="hovereffect">
<img class="img-responsive" src="http://best-law-firm-sites.com/lawpromo12/wp-content/uploads/2016/02/panel.jpg" alt="">
<div class="overlay">
<h2>Estate Planning</h2>
<a class="info" href="services/estate-planning/"></a>
</div>
</div>
</div>
<div class="col-sm-4 panel-2">
<div class="hovereffect">
<img class="img-responsive" src="http://best-law-firm-sites.com/lawpromo12/wp-content/uploads/2016/02/panel.jpg" alt="">
<div class="overlay">
<h2>Wills & Trusts</h2>
<a class="info" href="services/wills-trusts/"></a>
</div>
</div>
</div>

Answer 1

I have encountered similarly strange behavior in the past when using the backface visibility hack to trick the browser into using the 3d pipeline. There are other ways to 'trick' the browser into using the 3d pipeline like:
.class{
transform: translate3d(0,0,1);
}

Answer 2

You can resolve this problem by increasing the transform scale property to 1.001:
.hovereffect img{transform: scale(1.001);}