Estoy tratando de solucionar un problema de escalado de imágenes que solo parece ocurrir en Chrome y Edge, Safari y Firefox no tienen problemas. Estoy usando una biblioteca de controles deslizantes ( Flickity ) y un efecto de desplazamiento de escala en cada imagen/diapositiva. Cuando la imagen se escala, hay una fluctuación notable en los bordes. Esto sucede solo en Chrome.

Desglosé la estructura del control deslizante en HTML y CSS básicos y noté que esto solo sucede cuando el control deslizante agrega una propiedad translateX() con un valor porcentual O un valor que no es un número entero. Supongo que el control deslizante está haciendo esto en función de la cantidad de diapositivas/ancho, etc., y esto realmente no se puede cambiar. Esta biblioteca de controles deslizantes debe usarse, por lo que cambiar por una biblioteca diferente no es una opción.

Probé muchas soluciones diferentes, incluidas jQuery Transit / JS, etc., y este problema continúa ocurriendo, y solo ocurre cuando la propiedad translateX() existe en el valor porcentual o el valor bajo un número entero. Cualquier idea sería muy apreciada. A continuación, se muestra una estructura HTML básica pero similar que usa el control deslizante, incluida la propiedad transitionX() que existiría cuando el control deslizante se inicia, incluí CSS general para el efecto de desplazamiento.

 .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>