CSS Transform Scaleを使うと画像や文字がちらつく問題

参考ソース

参考ではちらつかないのですが…
ホバーしたら大きくなる仕様

<div class="cf">
  <div class="image-container">
    <img class="image" src="http://via.placeholder.com/350x150">
  </div>
  
  <div class="image-container">
    <img class="image" src="http://via.placeholder.com/350x150">
  </div>
  
  <div class="image-container">
    <img class="image" src="http://via.placeholder.com/350x150">
  </div>
</div>

.cf::after {
  content: "";
  display: table;
  clear: both;
  width: 100%;
}

.image-container {
  float: left;
  height: 150px;
  margin: 0 10px;
  position: relative;
  width: 350px;
}

.image {
  left: 50%;
  position: absolute;
  top: 50%;
  transition-duration: .3s;
  transform: translate(-50%, -50%);
}


.image-container:hover .image {
  transform: translate(-50%, -50%) scale(1.2);
}

対応策

1. backface-visibility: hidden を指定

指定する場所は画像を囲っている親要素だと解消する時が多かったです。
画像や文字自体に付けて解消する時もありました。
色々と付けてみるのがいいかと思います。

2. backface-visibility: hidden と overflow: hidden を指定 

こちらもなぜか解消できる系 一通り試してみるのが良さそう

その他. 組み方を変えてみる

imgタグを背景にする

imgタグを使わず背景で対応するなど これもダメなときと大丈夫な時があります。

親要素のwidthを調整する

親要素のwidthが%設定だったり小数点以下出ていて端数だと崩れる印象です。
最悪小数点がつかないようなレイアウトに修正することも考えられます。