Image scale on hover jitter on Chrome only

Question

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>

Maybe some tips here https://stackoverflow.com/questions/6492027/css-transform-jagged-edges-in-chrome — Joulss, Oct 29 '21 at 17:55
@Joulss Yea I have tried that too, but the "Jitter" remains. Can't quite figure out if this is just a Chromium bug or if there is some fix in regards to the container having the `translateX()` property. This is an oddly specific scenario, but it doesn't exist in Safari or Firefox. This is a head scratcher for me at the moment. — AaronS, Oct 29 '21 at 19:02
@JoelPeltonen May I ask what screen you are viewing it on? Have tested with higher res screens and it seems to work ok on those. This issue just gets more unique. I have also flagged this in Chrome for them. — AaronS, Nov 01 '21 at 17:09
And also tested with window.innerHeight 199, window.innerWidth 469 — Joel Peltonen, Nov 01 '21 at 17:12

Image scale on hover jitter on Chrome only

0 Answers0