CSS Transformsで画像がぼやける、ちらつく時の対処法

CSSのTransformsを使ったときに画像がぼやけるときありませんか？マウスオーバーで画像が拡大表示されるやつとか！ぼやけたり、ちらつく時にコードをたすだけで画像が綺麗に表示されます。そもそもこういうコード書かずに綺麗に表示されたらいいんですけど

追記するCSSのコード

img {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

 

2021年度版の追記するCSSのコード

上記よりもスマートな書き方がありましたので、追記します。

img {
    image-rendering: -webkit-optimize-contrast;
}

 

デモ作りました

backface-visibilityの指定があるとき

 

おまけ

”image-rendering”のコード

  -ms-interpolation-mode: nearest-neighbor;   /* IE8+ */
  image-rendering: -webkit-optimize-contrast; /* Safari (WebKit) */
  image-rendering: -moz-crisp-edges;          /* Firefox (Gecko) */
  image-rendering: -o-crisp-edges;            /* Opera 12.x */
  image-rendering: pixelated;                 /* Chrome 41+, Opera 29+ (CSS4) */

 

-WEB