I am trying to fix an image scaling issue that only seems to happen in Chrome and Edge, Safari and Firefox have no issues. I am using a slider library (Flickity) and a scale hover effect on each image/slide. When the image scales there is noticeable jitter on the edges. This happens in Chrome only.
I broke down the the slider structure to basic HTML and CSS and noticed that this only happens when the slider is adding a translateX() property with a percentage value OR value that is not a whole number. I assume the slider is doing this based on the number of slides/width etc, and this can't really be changed. This slider library has to be used, so changing out for a different library isn't an option.
I have tried a lot of different solutions including jQuery Transit / JS etc and this issue continues to happen, and only happens when the translateX() property exists in the percentage value or value under a whole number. Any ideas would be much appreciated. Below is a basic but similar HTML structure the slider uses including the transitionX() property that would exist when the slider is init, I included general CSS for the hover effect.
.flickity-slider {
display: flex;
position: relative;
left: 0px;
transform: translateX(-0.43px);
max-height: 320px;
overflow: hidden;
}
.slide {
overflow: hidden;
width: 25%;
margin: 10px;
max-height: 320px;
}
.slide img {
transition: transform .5s linear;
width: 100%;
}
.slide:hover img {
transform: scale(1.25);
}<div class="flickity-slider">
<div class="slide">
<div class="image">
<img class="image-scale" src="http://media4.popsugar-assets.com/files/2014/08/08/878/n/1922507/caef16ec354ca23b_thumb_temp_cover_file32304521407524949.xxxlarge/i/Funny-Cat-GIFs.jpg">
</div>
</div>
<div class="slide">
<div class="image">
<img class="image-scale" src="http://media4.popsugar-assets.com/files/2014/08/08/878/n/1922507/caef16ec354ca23b_thumb_temp_cover_file32304521407524949.xxxlarge/i/Funny-Cat-GIFs.jpg">
</div>
</div>
<div class="slide">
<div class="image">
<img class="image-scale" src="http://media4.popsugar-assets.com/files/2014/08/08/878/n/1922507/caef16ec354ca23b_thumb_temp_cover_file32304521407524949.xxxlarge/i/Funny-Cat-GIFs.jpg">
</div>
</div>
<div class="slide">
<div class="image">
<img class="image-scale" src="http://media4.popsugar-assets.com/files/2014/08/08/878/n/1922507/caef16ec354ca23b_thumb_temp_cover_file32304521407524949.xxxlarge/i/Funny-Cat-GIFs.jpg">
</div>
</div>
</div>